@charset "UTF-8"; /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

html {
    box-sizing: border-box
}

*, *:before, *:after {
    box-sizing: inherit
}

ul:not(.browser-default) {
    padding-left: 0;
    list-style-type: none
}

ul:not(.browser-default) > li {
    list-style-type: none
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}

button {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit
}

img, video {
    -webkit-user-drag: none
}

.z-depth-0 {
    box-shadow: none !important
}

.z-depth-1 {
    box-shadow: 0 2px 2px #00000024, 0 3px 1px -2px #0000001f, 0 1px 5px #0003
}

.z-depth-1-half {
    box-shadow: 0 3px 3px #00000024, 0 1px 7px #0000001f, 0 3px 1px -1px #0003
}

.z-depth-2 {
    box-shadow: 0 4px 5px #00000024, 0 1px 10px #0000001f, 0 2px 4px -1px #0000004d
}

.z-depth-3 {
    box-shadow: 0 8px 17px 2px #00000024, 0 3px 14px 2px #0000001f, 0 5px 5px -3px #0003
}

.z-depth-4 {
    box-shadow: 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f, 0 8px 10px -7px #0003
}

.z-depth-5 {
    box-shadow: 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f, 0 11px 15px -7px #0003
}

.hide {
    display: none !important
}

.hide-overflow {
    overflow: hidden
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.no-transition, .no-transition:before, .no-transition:after {
    transition: none !important
}

.inline {
    display: inline
}

.center-align, .text-center {
    text-align: center
}

.justify-start {
    justify-content: flex-start !important
}

.justify-self-start {
    justify-self: flex-start !important
}

.justify-self-end {
    justify-self: flex-end !important
}

.position-center {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.text-bold {
    font-weight: var(--font-weight-bold) !important
}

.text-normal {
    font-weight: var(--font-weight-normal) !important
}

.text-capitalize {
    text-transform: capitalize
}

.text-super {
    display: inline-table
}

.text-uppercase {
    text-transform: uppercase
}

.text-top {
    vertical-align: top
}

.pre-wrap {
    white-space: pre-wrap !important
}

.no-wrap {
    white-space: nowrap !important
}

.no-border-radius {
    border-radius: 0 !important
}

.disable-hover {
    pointer-events: none !important
}

.reflect-x {
    transform: scaleX(-1)
}

[dir=auto] {
    unicode-bidi: plaintext
}

.is-rtl [dir=auto] {
    direction: inherit
}

a {
    text-decoration: none
}

html {
    line-height: 1.5;
    font-weight: 400
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3
}

em {
    font-style: italic
}

strong {
    font-weight: 500
}

small {
    font-size: 75%
}

pre, code {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    /*white-space: -pre-wrap;*/
    white-space: -o-pre-wrap;
    word-wrap: break-word
}


:root {
    --vh: 1vh;
    --z-below: -1;
    --hover-alpha: .08;
    --reflect: 1;
    --transition-standard-easing: cubic-bezier(.4, 0, .2, 1);
    --transition-standard-in-time: .3s;
    --transition-standard-out-time: .25s;
    --transition-standard-in: var(--transition-standard-in-time) var(--transition-standard-easing);
    --transition-standard-out: var(--transition-standard-out-time) var(--transition-standard-easing);
    --transform-origin-inline-start: left;
    --transform-origin-inline-end: right;
    --transform-origin-left-center: left center;
    --transform-origin-right-center: right center;
    --pm-transition: .2s ease-in-out;
    --layer-transition: .2s cubic-bezier(.4, 0, .2, 1);
    --slide-header-transition: .4s ease-in-out;
    --tabs-transition: .2s ease-in-out;
    --btn-menu-transition: .2s cubic-bezier(.4, 0, .2, 1);
    --esg-transition: var(--btn-menu-transition);
    --input-transition: .2s ease-out;
    --input-placeholder-transition: .15s ease-out;
    --reaction-paid-transition: .2s ease-in-out;
    --sticker-viewer-open-transition-in: .2s var(--transition-standard-easing);
    --sticker-viewer-open-transition-out: .2s var(--transition-standard-easing);
    --sticker-viewer-switch-transition: .2s cubic-bezier(.12, 1.1, .56, 1.2);
    --popup-transition-function: cubic-bezier(.4, 0, .2, 1);
    --popup-transition-time: .15s;
    --popup-transition: var(--popup-transition-time) var(--popup-transition-function);
    --btn-corner-transition: .2s cubic-bezier(.34, 1.56, .64, 1);
    --chatlist-badge-transition-in: .25s cubic-bezier(.35, .35, .47, 1.34);
    --chatlist-badge-transition-out: .25s cubic-bezier(.35, .35, .7, 1);
    --message-handhelds-margin: 5.5625rem;
    --message-beside-button-size: 2.375rem;
    --message-beside-button-margin: calc((var(--message-beside-button-size) + .5rem) * -1);
    --message-time-background: rgba(0, 0, 0, .35);
    --messages-container-width: 728px;
    --messages-text-size: 16px;
    --messages-line-height: 1.3125;
    --messages-secondary-text-size: calc(var(--messages-text-size) - 2px);
    --messages-secondary-line-height: calc(var(--messages-secondary-text-size) + 4px);
    --messages-time-text-size: calc(var(--messages-text-size) - 4px);
    --messages-service-text-size: calc(var(--messages-text-size) - 1px);
    --messages-custom-emoji-size: calc(var(--messages-text-size) + 4px);
    --bubble-transition-in: transform var(--transition-standard-in), opacity var(--transition-standard-in);
    --bubble-transition-out: transform var(--transition-standard-out), opacity var(--transition-standard-out);
    --line-height-20: 26px;
    --line-height-18: 24px;
    --line-height-16: 21px;
    --line-height-15: 20px;
    --line-height-14: 18px;
    --line-height-13: 17px;
    --line-height-12: 16px;
    --line-height-11: 15px;
    --line-height: 1.3125;
    --font-size-20: 20px;
    --font-size-18: 18px;
    --font-size-16: 16px;
    --font-size-15: 15px;
    --font-size-14: 14px;
    --font-size-13: 13px;
    --font-size-12: 12px;
    --font-size-11: 11px;
    --font-size: var(--font-size-16);
    --esg-sticker-size: 72px;
    --esg-custom-emoji-size: 36px;
    --popup-sticker-size: 80px;
    --disabled-opacity: .3;
    --round-video-size: 280px;
    --menu-box-shadow: 0px 0px 10px var(--menu-box-shadow-color);
    --menu-backdrop-filter: blur(50px);
    --font-regular: "Roboto", -apple-system, apple color emoji, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-monospace: "Roboto Mono", monospace;
    --font-rounded: -ui-rounded, "Numbers Rounded", "Roboto", "Helvetica Neue", sans-serif;
    --font-weight-bold: 500;
    --font-weight-normal: 400;
    --selection-background-color: rgba(var(--primary-color-rgb), .4);
    --selection-color: inherit;
    --white: #ffffff;
    --ripple-duration: .7s;
    --ripple-start-scale: 0;
    --ripple-end-scale: 2;
    --topbar-floating-scaleX: 1;
    --topbar-call-group-call-height: 3rem;
    --topbar-call-call-height: 3rem;
    --topbar-call-rtmp-height: 1.6875rem;
    --topbar-floating-call-height: 0px;
    --call-button-size: 3.375rem;
    --call-button-margin: 2rem;
    --custom-emoji-size: 1.25rem;
    --chat-input-border-radius: 1rem;
    --chat-input-max-width: var(--messages-container-width);
    --chat-input-btn-send-margin: .5rem;
    --peer-avatar-red-top: #FF845E;
    --peer-avatar-red-bottom: #D45246;
    --peer-avatar-orange-top: #FEBB5B;
    --peer-avatar-orange-bottom: #F68136;
    --peer-avatar-violet-top: #B694F9;
    --peer-avatar-violet-bottom: #6C61DF;
    --peer-avatar-green-top: #9AD164;
    --peer-avatar-green-bottom: #46BA43;
    --peer-avatar-cyan-top: #53edd6;
    --peer-avatar-cyan-bottom: #28c9b7;
    --peer-avatar-blue-top: #5CAFFA;
    --peer-avatar-blue-bottom: #408ACF;
    --peer-avatar-pink-top: #FF8AAC;
    --peer-avatar-pink-bottom: #D95574;
    --peer-avatar-archive-top: #B8C2CC;
    --peer-avatar-archive-bottom: #9EAAB5;
    --peer-avatar-saved-top: var(--light-filled-saved-color);
    --peer-avatar-saved-bottom: var(--saved-color);
    --peer-color: var(--primary-color);
    --peer-color-rgb: var(--primary-color-rgb);
    --avatar-color-story-unread-from: #34c76f;
    --avatar-color-story-unread-to: #3da1fd;
    --avatar-color-story-close-from: #88D93A;
    --avatar-color-story-close-to: #30B73B;
    --avatar-color-story-read: var(--secondary-color);
    --avatar-color-top: var(--peer-avatar-saved-top);
    --avatar-color-bottom: var(--peer-avatar-saved-bottom);
    --avatar-border-radius-forum: 37%;
    --premium-gradient: linear-gradient(52.62deg, #6B93FF 12.22%, #976FFF 50.25%, #E46ACE 98.83%);
    --star-background-color: var(--surface-color);
    --passcode-lock-screen-z-index: 100000;
    --star-golden-color: #fecf16
}

:root.is-rtl {
    --reflect: -1;
    --transform-origin-inline-start: right;
    --transform-origin-inline-end: left;
    --transform-origin-left-center: right center;
    --transform-origin-right-center: left center
}

@media only screen and (max-width: 925px) {
    :root {
        --ripple-duration: .4s;
        --ripple-start-scale: .27
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --right-column-width: 100vw;
        --esg-sticker-size: 68px;
        --popup-sticker-size: 68px;
        --round-video-size: 240px;
        --chat-input-size: 2.875rem;
        --chat-input-padding: .5rem;
        --chat-input-inner-padding: .25rem
    }
}

@media only screen and (min-width: 601px) {
    :root {
        --right-column-width: 420px;
        --chat-input-size: 3.375rem;
        --chat-input-padding: .8125rem;
        --chat-input-inner-padding: .5rem
    }
}

@media only screen and (max-height: 569px) {
    :root {
        --chat-input-size: 2.875rem;
        --chat-input-inner-padding: .25rem
    }
}

@media only screen and (min-width: 1276px) and (max-width: 1680px) {
    :root {
        --right-column-width: 25vw
    }
}

:root {
    --body-background-color: #fff;
    --body-background-color-rgb: 255, 255, 255;
    --background-color-true: #f4f4f5;
    --background-color: var(--background-color-true);
    --border-color: #dfe1e5;
    --scrollbar-color: rgba(0, 0, 0, .2);
    --section-box-shadow-color: rgba(0, 0, 0, .06);
    --menu-box-shadow-color: rgba(0, 0, 0, .15);
    --input-search-background-color: #fff;
    --input-search-border-color: #dfe1e5;
    --secondary-color: #c4c9cc;
    --warning-color: #fed85a;
    --green-color: #3ba748;
    --green-color-rgb: 59, 167, 72;
    --avatar-online-color: var(--primary-color);
    --chatlist-status-color: var(--avatar-online-color);
    --chatlist-pinned-color: #a2abb2;
    --badge-text-color: #fff;
    --link-color: #00488f;
    --ripple-color: rgba(0, 0, 0, .08);
    --skeleton-color: rgba(0, 0, 0, .12);
    --poll-circle-color: var(--border-color);
    --spoiler-background-color: #e3e5e8;
    --spoiler-draft-background-color: #d9d9d9;
    --monospace-text-color: var(--danger-color);
    --backdrop-opacity: .85;
    --menu-background-color: rgba(var(--surface-color-rgb), var(--backdrop-opacity));
    --rlottie-vector-fill: rgba(0, 0, 0, .08);
    --limit-line-empty-background: #F1F3F5;
    --old-input-background-color: #F1F3F5;
    --premium-color: #9275ff;
    --gc-background-color: #212121;
    --gc-button-leave-color: rgba(255, 89, 90, .3);
    --gc-button-unmuted-color: rgba(1, 200, 80, .2);
    --gc-button-muted-color: rgba(60, 135, 247, .2);
    --gc-button-hand-color: rgba(223, 68, 184, .2);
    --gc-button-unmuted-fill-color: #195530;
    --gc-button-muted-fill-color: #3C87F7;
    --gc-green-color: #195530;
    --gc-blue-color: #3C87F7;
    --gc-red-color: #643333;
    --gc-primary-text-color: #fff;
    --gc-secondary-text-color: #aaaaaa;
    --gc-green-text-color: #5CC85E;
    --gc-blue-text-color: #3390ec;
    --gc-red-text-color: #ff595a;
    --gc-right-column-width: 26.25rem
}

.night {
    --body-background-color: #181818;
    --body-background-color-rgb: 24, 24, 24;
    --background-color-true: #181818;
    --background-color: var(--background-color-true);
    --border-color: #0f0f0f;
    --scrollbar-color: rgba(255, 255, 255, .2);
    --section-box-shadow-color: rgba(0, 0, 0, .12);
    --input-search-background-color: #181818;
    --input-search-border-color: #2f2f2f;
    --secondary-color: #707579;
    --avatar-online-color: var(--primary-color);
    --chatlist-status-color: var(--primary-color);
    --chatlist-pinned-color: var(--secondary-color);
    --badge-text-color: #fff;
    --link-color: var(--primary-color);
    --ripple-color: rgba(255, 255, 255, .08);
    --skeleton-color: rgba(255, 255, 255, .12);
    --poll-circle-color: #fff;
    --spoiler-background-color: #373e4e;
    --spoiler-draft-background-color: #484848;
    --monospace-text-color: var(--primary-text-color);
    --menu-background-color: rgba(var(--surface-color-rgb), .75);
    --rlottie-vector-fill: var(--light-secondary-text-color);
    --limit-line-empty-background: var(--light-filled-secondary-text-color);
    --old-input-background-color: var(--background-color-true)
}

.chat {
    --message-highlighting-color: hsla(85.5319, 36.9171%, 40.402%, .4);
    --message-highlighting-hover-color: rgba(var(--message-highlighting-color-rgb), calc(var(--message-highlighting-alpha) + .24));
    --message-time-color: var(--secondary-text-color);
    --message-checkbox-color: #61c642;
    --message-checkbox-border-color: #fff;
    --message-primary-color: var(--primary-color);
    --message-primary-color-rgb: var(--primary-color-rgb);
    --light-filled-message-primary-color: var(--light-filled-primary-color);
    --message-status-color: var(--secondary-text-color);
    --message-secondary-color: var(--secondary-color);
    --message-error-color: var(--danger-color);
    --message-icon-text-color: #fff;
    --message-empty-primary-color: #fff;
    --message-empty-primary-color-rgb: 255, 255, 255;
    --message-reaction-tag-dot-color: rgba(255, 255, 255, .4);
    --message-out-link-color: var(--link-color);
    --message-out-status-color: var(--message-out-primary-color);
    --message-out-time-color: var(--message-out-status-color);
    --message-out-icon-text-color: #fff;
    --message-out-selection-background-color: var(--selection-background-color);
    --message-out-reaction-tag-dot-color: var(--message-reaction-tag-dot-color)
}

.night .chat {
    --message-time-color: var(--secondary-text-color);
    --message-checkbox-color: var(--primary-color);
    --message-checkbox-border-color: #fff;
    --message-status-color: var(--secondary-color);
    --message-secondary-color: var(--secondary-color);
    --message-error-color: #fff;
    --message-icon-text-color: #fff;
    --message-out-link-color: #fff;
    --message-out-status-color: #fff;
    --message-out-time-color: rgba(255, 255, 255, .6);
    --message-out-icon-text-color: var(--message-out-background-color);
    --message-out-selection-background-color: rgba(var(--surface-color-rgb), .4);
    --message-out-reaction-tag-dot-color: var(--message-out-background-color)
}

.code-code {
    text-align: left;
    word-spacing: normal;
    direction: ltr;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    hyphens: none
}

.prism-token.prism-comment, .prism-token.prism-prolog, .prism-token.prism-doctype, .prism-token.prism-cdata {
    color: var(--secondary-text-color)
}

.night .prism-token.prism-comment, .night .prism-token.prism-prolog, .night .prism-token.prism-doctype, .night .prism-token.prism-cdata {
    opacity: .5
}

.prism-token.prism-punctuation {
    color: var(--secondary-text-color)
}

.prism-token.prism-namespace {
    opacity: .7
}

.prism-token.prism-property, .prism-token.prism-tag, .prism-token.prism-boolean, .prism-token.prism-number, .prism-token.prism-constant, .prism-token.prism-symbol, .prism-token.prism-deleted {
    color: var(--danger-color)
}

.prism-token.prism-selector, .prism-token.prism-attr-name, .prism-token.prism-string, .prism-token.prism-char, .prism-token.prism-builtin, .prism-token.prism-inserted {
    color: var(--secondary-text-color)
}

.night .prism-token.prism-selector, .night .prism-token.prism-attr-name, .night .prism-token.prism-string, .night .prism-token.prism-char, .night .prism-token.prism-builtin, .night .prism-token.prism-inserted {
    color: var(--primary-color)
}

.prism-token.prism-operator, .prism-token.prism-entity, .prism-token.prism-url, .prism-language-css .prism-token.prism-string, .prism-style .prism-token.prism-string {
    color: var(--danger-color)
}

.prism-token.prism-atrule, .prism-token.prism-attr-value, .prism-token.prism-keyword {
    color: var(--primary-color)
}

.night .prism-token.prism-atrule, .night .prism-token.prism-attr-value, .night .prism-token.prism-keyword, .prism-token.prism-function, .prism-token.prism-class-name {
    color: var(--danger-color)
}

.night .prism-token.prism-function, .night .prism-token.prism-class-name, .prism-token.prism-regex, .prism-token.prism-important, .prism-token.prism-variable {
    color: var(--primary-text-color)
}

.prism-token.prism-important, .prism-token.prism-bold {
    font-weight: var(--font-weight-bold)
}

.prism-token.prism-italic {
    font-style: italic
}

.prism-token.prism-entity {
    cursor: help
}

@font-face {
    font-family: tgico;
    src: url('./tgico.ttf') format("truetype"),url('./tgico.woff') format("woff"),url('./tgico.svg') format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}


.tgico {
    font-family: tgico !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.input-wrapper {
    width: 360px;
    margin: 0 auto
}

.input-field {
    --height: 54px;
    --border-radius: 10px;
    --padding: 1rem;
    --padding-horizontal: 1rem;
    --border-width: 1px;
    position: relative;
    display: flex;
    align-items: center
}

@media only screen and (max-width: 600px) {
    .input-field {
        --height: 50px;
        --padding: .9375rem;
        --padding-horizontal: .9375rem
    }
}

.input-field .arrow-down {
    position: absolute;
    content: " ";
    top: 50%;
    bottom: 0;
    right: 21px;
    cursor: pointer;
    height: 0;
    width: 0;
    border: solid var(--secondary-text-color);
    border-radius: 1px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    vertical-align: middle;
    z-index: 2;
    margin-top: -9px;
    transform: rotate(45deg);
    transition: .2s all
}

.input-field label {
    position: absolute;
    color: #9e9e9e;
    top: 0;
    inset-inline: var(--padding-horizontal) auto;
    z-index: 2;
    height: 1.5rem;
    transform: translate(0);
    background-color: var(--surface-color);
    transform-origin: var(--transform-origin-left-center);
    pointer-events: none;
    margin-top: calc((var(--height) - 1.5rem) / 2);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

body.animation-level-2 .input-field label {
    transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s
}

.input-field-border {
    position: absolute;
    inset: 0;
    border: 2px solid var(--primary-color);
    opacity: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: 1
}

body.animation-level-2 .input-field-border {
    transition: opacity .2s
}

.input-field-icon {
    position: absolute;
    right: 1rem;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .375rem;
    pointer-events: none
}

.input-field-input {
    border: var(--border-width) solid var(--input-search-border-color);
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
    padding: calc(var(--padding) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
    box-sizing: border-box;
    width: 100%;
    min-height: var(--height);
    transition: 0s border-color;
    position: relative;
    z-index: 1;
    line-height: var(--line-height)
}

.input-field-input:-webkit-autofill, .input-field-input:-webkit-autofill:hover, .input-field-input:-webkit-autofill:focus, .input-field-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--surface-color) inset
}

.input-field-input:-webkit-autofill:first-line, .input-field-input:-webkit-autofill, .input-field-input:-webkit-autofill:hover, .input-field-input:-webkit-autofill:focus, .input-field-input:-webkit-autofill:active {
    font-family: "Roboto", -apple-system, apple color emoji, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 1rem !important;
    color: var(--primary-text-color) !important
}

body.animation-level-0 .input-field-input {
    transition: none !important
}

html.no-touch .input-field-input:hover:not(:focus):not(.error):not(.valid), html.no-touch .input-field-input:active:not(:focus):not(.error):not(.valid) {
    border-color: var(--primary-color);
    transition: .2s border-color
}

html.no-touch .input-field-input:hover:not(:focus):not(.error):not(.valid) ~ label, html.no-touch .input-field-input:active:not(:focus):not(.error):not(.valid) ~ label {
    color: var(--primary-color)
}

.input-field-input:focus {
    border-color: var(--primary-color)
}

.input-field-input.error {
    border-color: var(--danger-color)
}

.input-field-input.error ~ label {
    color: var(--danger-color) !important
}

.input-field-input.error ~ .input-field-border {
    border-color: var(--danger-color) !important
}

.input-field-input.valid {
    border-color: #26962f
}

.input-field-input.valid ~ label {
    color: #26962f !important
}

.input-field-input.valid ~ .input-field-border {
    border-color: #26962f !important
}

.input-field-input:focus ~ .arrow-down {
    margin-top: -4px;
    transform: rotate(225deg);
    border-color: var(--primary-color)
}

.input-field-input:focus ~ label, .input-field-input.force-focus ~ label {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold)
}

.input-field-input:focus ~ .input-field-border, .input-field-input.force-focus ~ .input-field-border {
    opacity: 1
}

.input-field-input:focus ~ label, .input-field-input:valid ~ label, .input-field-input:not(.is-empty) ~ label, .input-field-input:disabled ~ label, .input-field-input.force-focus ~ label {
    transform: translate(calc(-.1875rem + 1rem - var(--padding-horizontal)), calc(var(--height) / -2 + .0625rem)) scale(.75);
    padding: 0 .3125rem;
    opacity: 1
}

.input-field-input:not(:focus).is-empty ~ .input-field-placeholder ~ label {
    opacity: 0
}

.input-field-input-fake {
    opacity: 0;
    pointer-events: none;
    position: absolute !important;
    top: 0;
    bottom: auto !important;
    left: var(--imc-padding-horizontal) !important;
    right: var(--imc-padding-horizontal) !important;
    width: auto !important;
    height: auto !important;
    z-index: -3
}

.input-field .input-field-input[contenteditable=false] {
    opacity: var(--disabled-opacity);
    pointer-events: none
}

.input-field-placeholder {
    color: #a2acb4;
    display: block;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    max-width: 100%;
    padding-inline-end: .5rem;
    inset-inline-start: var(--padding-horizontal);
    z-index: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

body.animation-level-2 .input-field-placeholder {
    transform: translate(calc(1rem * var(--reflect)));
    transition: opacity var(--input-placeholder-transition) .01s, transform var(--input-placeholder-transition) .01s
}

.input-field-placeholder.is-empty {
    opacity: 1
}

body.animation-level-2 .input-field-placeholder.is-empty {
    transform: translate(0)
}

.input-field-right-label {
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--secondary-text-color)
}

.input-fields-row {
    display: flex
}

.input-fields-row .input-field {
    flex: 1 1 auto;
    width: 1%
}

.input-wrapper {
    display: grid;
    gap: 1.5rem;
    grid-template-columns:100%
}

::-moz-placeholder {
    color: #909192;
    opacity: 1
}

::placeholder {
    color: #909192;
    opacity: 1
}

:-ms-input-placeholder {
    color: #909192
}

::-ms-input-placeholder {
    color: #909192
}

input:focus, button:focus {
    outline: none
}

.input-clear {
    outline: none;
    border: none;
    padding: 0
}

body.animation-level-0 .input-clear.error {
    color: var(--danger-color) !important
}

body:not(.animation-level-0) .input-clear.error {
    animation: input-shake .2s ease-in-out forwards
}

@keyframes input-shake {
    0% {
        transform: translate(0)
    }
    25% {
        transform: translate(-.5rem)
    }
    75% {
        transform: translate(.5rem)
    }
    to {
        transform: translate(0)
    }
}

.input-search {
    --border-width: 1px;
    --height: 42px;
    --border-radius: 22px;
    --icon-left-add-offset: 0rem;
    --icon-left-offset: calc(.8125rem + var(--icon-left-add-offset));
    --icon-size: 1.5rem;
    --padding-horizontal: calc(var(--height) + 3px + var(--icon-left-add-offset) - var(--border-width));
    position: relative;
    width: 100%;
    margin-inline: .4375rem;
    overflow: hidden;
    display: flex;
    align-items: center
}

@media only screen and (max-width: 600px) {
    .input-search {
        margin-inline-start: 1rem
    }
}

@keyframes grow-input {
    0% {
        transform: scale(.5);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: var(--max-opacity, 1)
    }
}

@keyframes hide-input {
    0% {
        transform: scale(1);
        opacity: var(--max-opacity, 1)
    }
    to {
        transform: scale(.5);
        opacity: 0
    }
}

body.animation-level-2 .input-search .will-animate {
    animation: grow-input .25s forwards ease-in-out
}

body.animation-level-2 .input-search .will-animate.is-hiding {
    animation: hide-input .25s forwards ease-in-out
}

body.animation-level-0 .input-search .will-animate.is-hiding {
    opacity: 0
}

.input-search.show-placeholder .input-search-placeholder {
    display: block !important
}

.input-search.old-style .input-search-input {
    background-color: var(--old-input-background-color);
    border-color: transparent
}

.input-search-placeholder {
    position: absolute;
    color: #9e9e9e;
    z-index: 1;
    white-space: nowrap;
    inset-inline-start: calc(var(--padding-horizontal) + var(--border-width));
    pointer-events: none;
    transform-origin: left center
}

.input-search-input {
    --border-width: inherit;
    --padding-horizontal: inherit;
    background-color: var(--input-search-background-color);
    padding: 0px var(--padding-horizontal);
    height: var(--height);
    min-height: var(--height) !important;
    max-height: var(--height) !important;
    border-color: var(--input-search-border-color);
    line-height: var(--line-height-16)
}

body.animation-level-2 .input-search-input {
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out
}

html.no-touch .input-search-input:hover:not(:focus), html.no-touch .input-search-input:active:not(:focus) {
    border-color: var(--secondary-color) !important
}

.input-search-input.with-focus-effect:focus {
    background-color: transparent;
    border-color: var(--primary-color)
}

.input-search-input.with-focus-effect:focus ~ .input-search-part {
    --max-opacity: 1;
    color: var(--primary-color)
}

.input-search-input.with-focus-effect:focus ~ .preloader-container .preloader-path-new {
    stroke: var(--primary-color)
}

html.no-touch .input-search-input.with-focus-effect:focus ~ .input-search-button:hover, html.no-touch .input-search-input.with-focus-effect:focus ~ .input-search-button:active {
    background-color: var(--light-primary-color)
}

.input-search-input.is-empty ~ .input-search-clear:not(.always-visible), .input-search-input:not(.is-empty) ~ .input-search-placeholder {
    display: none
}

.input-search.is-picked .input-search-placeholder {
    display: none
}

.input-search .input-search-part {
    --max-opacity: .6;
    position: absolute;
    text-align: center;
    font-size: var(--icon-size);
    color: var(--secondary-text-color);
    opacity: var(--max-opacity);
    line-height: 1;
    z-index: 1
}

body.animation-level-2 .input-search .input-search-part {
    transition: opacity .2s ease-out, color .2s ease-out
}

.input-search-icon, .input-search .preloader-container {
    width: var(--icon-size);
    height: var(--icon-size);
    inset-inline-start: var(--icon-left-offset);
    pointer-events: none
}

.input-search .preloader-container {
    right: auto;
    z-index: 1
}

.input-search .preloader-container .preloader-path-new {
    stroke: var(--secondary-color)
}

body.animation-level-2 .input-search .preloader-container .preloader-path-new {
    transition: stroke .2s ease-out !important
}

.input-search-clear {
    inset-inline-end: calc((var(--height) - 2.25rem) / 2);
    z-index: 1
}

.input-search-button {
    padding: .375rem !important
}

.input-field-password .input-field-input {
    padding-inline-end: 2.5rem;
    max-height: var(--height)
}

.input-field-password .input-field-input[type=password] {
    font-size: 2.25rem;
    padding-left: calc(.875rem - var(--border-width));
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    font-family: Arial, Helvetica, sans-serif
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .input-field-password .input-field-input[type=password] {
        font-size: 1.75rem;
        letter-spacing: .125rem
    }
}

html.is-ios .input-field-password .input-field-input[type=password] {
    font-size: 1rem
}

.input-field-password .input-field-input[type=password]::-ms-reveal {
    display: none
}

.input-field-password .toggle-visible {
    position: absolute;
    right: .375rem;
    z-index: 2;
    font-size: 1.5rem;
    color: #9e9e9e;
    cursor: pointer;
    transition: color .2s;
    padding: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%)
}

html.no-touch .input-field-password .toggle-visible:hover, html.no-touch .input-field-password .toggle-visible:active {
    color: var(--primary-text-color)
}

.input-field-phone .input-field-input {
    --letter-spacing: .24px
}

.input-field-phone .input-field-input:after {
    content: attr(data-left-pattern);
    color: #9e9e9e;
    letter-spacing: var(--letter-spacing)
}

.btn, .btn-icon {
    background: none;
    outline: none;
    border: none;
    cursor: pointer
}

body.animation-level-0 .btn, body.animation-level-0 .btn-icon {
    transition: none
}

html.no-touch .btn:hover, html.no-touch .btn:active, html.no-touch .btn-icon:hover, html.no-touch .btn-icon:active {
    background-color: var(--light-secondary-text-color)
}

html.no-touch .btn.primary:hover, html.no-touch .btn.primary:active, html.no-touch .btn.blue:hover, html.no-touch .btn.blue:active, html.no-touch .btn.active:hover, html.no-touch .btn.active:active, html.no-touch .btn-icon.primary:hover, html.no-touch .btn-icon.primary:active, html.no-touch .btn-icon.blue:hover, html.no-touch .btn-icon.blue:active, html.no-touch .btn-icon.active:hover, html.no-touch .btn-icon.active:active {
    background-color: var(--light-primary-color)
}

html.no-touch .btn.danger:hover, html.no-touch .btn.danger:active, html.no-touch .btn-icon.danger:hover, html.no-touch .btn-icon.danger:active {
    background-color: var(--light-danger-color)
}

.btn:disabled, .btn-icon:disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity)
}

.btn-icon {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50% !important;
    color: var(--secondary-text-color);
    background-color: transparent;
    border: none;
    padding: .5rem;
    position: relative;
    transition: color .15s ease-in-out, opacity .15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center
}

.btn-icon.rp {
    overflow: hidden
}

.btn-icon.active {
    color: var(--primary-color)
}

.btn-corner {
    --offset: 1.25rem;
    --translateY: calc(54px + var(--offset));
    position: absolute !important;
    bottom: var(--offset);
    inset-inline-end: var(--offset);
    transition: transform var(--btn-corner-transition) !important;
    transform: translate3d(0, var(--translateY), 0);
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--primary-color);
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important
}

html.no-touch .btn-corner:hover, html.no-touch .btn-corner:active {
    background-color: var(--dark-primary-color)
}

.btn-corner.is-visible {
    --translateY: 0
}

body.animation-level-0 .btn-corner {
    transition: none !important
}

.btn-corner:disabled {
    opacity: 1 !important;
    pointer-events: all !important
}

.btn-corner .preloader-circular {
    width: 2.5rem;
    height: 2.5rem
}

.btn-menu {
    --transform-extra: translateX(0);
    --transform-origin-x: center;
    --transform-origin-y: center;
    position: absolute;
    z-index: 4;
    top: 100%;
    font-size: 1rem;
    min-width: 11.25rem;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    width: -moz-max-content;
    width: max-content;
    transform-origin: var(--transform-origin-x) var(--transform-origin-y)
}

.btn-menu, .btn-menu-items {
    box-shadow: var(--menu-box-shadow);
    padding: .3125rem 0;
    border-radius: 10px
}

.btn-menu, .btn-menu-transition {
    visibility: hidden;
    opacity: 0;
    transform: var(--transform-extra) scale(.8);
    transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition)
}

body.animation-level-0 .btn-menu, body.animation-level-0 .btn-menu-transition {
    transition: none
}

.btn-menu-transition {
    transform-origin: inherit
}

.btn-menu, .btn-menu-items, .btn-menu-reactions-container {
    background-color: var(--menu-background-color);
    -webkit-backdrop-filter: var(--menu-backdrop-filter);
    backdrop-filter: var(--menu-backdrop-filter)
}

.btn-menu.has-items-wrapper {
    opacity: 1 !important;
    transform: unset !important;
    transition: unset !important;
    visibility: visible !important;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
    background-color: unset;
    box-shadow: unset;
    padding: 0
}

.btn-menu-old, .is-mobile .btn-menu {
    --menu-background-color: var(--surface-color);
    --menu-backdrop-filter: none;
    padding: .5rem 0;
    background-color: var(--surface-color);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    min-width: auto
}

.btn-menu-old .btn-menu-reactions-container, .is-mobile .btn-menu .btn-menu-reactions-container {
    --menu-offset: calc((var(--height) + 1rem) * -1)
}

.btn-menu-old .btn-menu-item, .is-mobile .btn-menu .btn-menu-item {
    --padding-left: 1rem;
    --padding-right: 2.5rem;
    --icon-margin: 1.5rem;
    --icon-size: 1.5rem;
    height: 3rem;
    line-height: var(--line-height-16);
    font-size: var(--font-size-16);
    border-radius: 0;
    margin: 0;
    font-weight: 400;
    transform: none !important
}

.btn-menu-old .btn-menu-item-icon, .is-mobile .btn-menu .btn-menu-item-icon {
    color: var(--secondary-text-color);
    align-self: unset;
    margin-top: 0
}

.btn-menu-old .is-multiline, .btn-menu-old .is-secondary, .is-mobile .btn-menu .is-multiline, .is-mobile .btn-menu .is-secondary {
    min-width: auto;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    max-width: 15rem
}

.btn-menu-old .btn-menu-footer, .is-mobile .btn-menu .btn-menu-footer {
    background-color: var(--background-color)
}

.btn-menu.active, .btn-menu.active .btn-menu-transition {
    visibility: visible;
    opacity: 1;
    transform: var(--transform-extra) scaleZ(1)
}

.is-mobile .btn-menu.was-open, .is-mobile .btn-menu.was-open .btn-menu-transition {
    transform: var(--transform-extra) scaleZ(1)
}

.btn-menu.bottom-left {
    --transform-origin-x: var(--transform-origin-inline-end);
    --transform-origin-y: top;
    inset-block: 100% auto;
    inset-inline: auto 0
}

.btn-menu.bottom-right {
    --transform-origin-x: var(--transform-origin-inline-start);
    --transform-origin-y: top;
    inset-block: 100% auto;
    inset-inline: 0 auto
}

.btn-menu.bottom-center {
    --transform-origin-x: center;
    --transform-origin-y: top;
    --transform-extra: translateX(calc(-50% + var(--parent-half-width)));
    inset-block: 100% auto;
    inset-inline: 0 auto
}

.btn-menu.top-left {
    --transform-origin-x: var(--transform-origin-inline-end);
    --transform-origin-y: bottom;
    inset-block: auto 100%;
    inset-inline: auto 0
}

.btn-menu.top-right {
    --transform-origin-x: var(--transform-origin-inline-start);
    --transform-origin-y: bottom;
    inset-block: auto 100%;
    inset-inline: 0 auto
}

.btn-menu.top-center {
    --transform-origin-x: center;
    --transform-origin-y: bottom
}

.btn-menu.center-left {
    --transform-origin-x: var(--transform-origin-inline-end);
    --transform-origin-y: center
}

.btn-menu.center-right {
    --transform-origin-x: var(--transform-origin-inline-start);
    --transform-origin-y: center
}

.btn-menu-item {
    --padding-vertical: .25rem;
    --padding-left: .75rem;
    --padding-right: .75rem;
    --icon-margin: 1.25rem;
    --icon-size: 1.25rem;
    display: flex;
    position: relative;
    padding-block: var(--padding-vertical);
    padding-inline: var(--padding-left) var(--padding-right);
    height: 2rem;
    cursor: pointer !important;
    pointer-events: all !important;
    color: var(--primary-text-color);
    text-transform: none;
    align-items: center;
    text-align: start;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    border-radius: .3125rem;
    margin-inline: .3125rem;
    font-weight: 500;
    transform: scale(1)
}

.btn-menu-item.a .btn-menu-item-icon {
    font-family: Roboto !important;
    width: var(--icon-size);
    text-align: center
}

body.animation-level-2 .btn-menu-item {
    transition: transform .1s var(--transition-standard-easing)
}

.btn-menu-item.disable-click {
    cursor: default !important
}

.btn-menu-item:not(.disable-click):active {
    transform: scale(.96)
}

html.no-touch .btn-menu-item:hover, html.no-touch .btn-menu-item:active {
    background-color: var(--light-secondary-text-color)
}

html.no-touch .btn-menu-item.danger:hover, html.no-touch .btn-menu-item.danger:active {
    background-color: var(--light-danger-color)
}

.btn-menu-item-icon {
    --add: 0px;
    --total: calc(var(--icon-size) + var(--add));
    flex: 0 0 auto;
    width: var(--total);
    height: var(--total);
    margin-inline-end: calc(var(--icon-margin) - var(--add) / 2);
    margin-inline-start: calc(var(--add) / -2);
    color: currentColor;
    font-size: var(--icon-size);
    align-self: flex-start;
    margin-top: .125rem;
    padding: 0;
    position: relative
}

.btn-menu-item-icon-right {
    margin-inline: .25rem -.5rem;
    font-size: calc(var(--icon-size) - 2px);
    display: flex;
    align-items: center;
    justify-content: center
}

.btn-menu-item-icon.is-external {
    --add: .25rem;
    margin-top: 0
}

.btn-menu-item-icon .media-photo {
    width: inherit;
    height: inherit
}

@media only screen and (max-width: 600px) {
    .btn-menu-item {
        --padding-right: 1.875rem
    }
}

.btn-menu-item-text {
    position: relative;
    flex: 1 1 auto
}

.btn-menu-item-text, .btn-menu-item-text-fake {
    pointer-events: none
}

.btn-menu-item-text-fake {
    --margin-left: calc(var(--icon-size) + var(--icon-margin));
    position: absolute;
    margin-inline-start: var(--margin-left);
    max-width: calc(100% - var(--margin-left) - var(--padding-left) - var(--padding-right));
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.btn-menu-item-badge {
    text-transform: uppercase;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: #fff;
    padding: .125rem .3125rem;
    flex: 0 0 auto;
    transform: scale(.75)
}

.btn-menu-item-subtitle {
    font-size: .875rem;
    color: var(--secondary-text-color)
}

.btn-menu-item-header {
    color: var(--secondary-text-color);
    height: 2rem;
    font-weight: var(--font-weight-bold);
    pointer-events: none !important
}

.btn-menu-item-loader {
    height: 8px;
    border-radius: 8px;
    width: 100px;
    background-color: var(--secondary-color);
    overflow: hidden;
    position: relative
}

.btn-menu-item .stacked-avatars {
    --margin-right: -.6875rem;
    flex: 0 0 auto;
    inset-inline-end: .5rem;
    position: absolute;
    pointer-events: none
}

.btn-menu-item.is-multiline, .btn-menu-item.is-secondary {
    height: auto !important;
    width: -moz-fit-content;
    width: fit-content;
    min-width: calc(100% - .625rem);
    max-width: 16.25rem
}

.btn-menu-item.is-multiline .btn-menu-item-text, .btn-menu-item.is-secondary .btn-menu-item-text {
    white-space: pre-wrap;
    width: -moz-fit-content;
    width: fit-content;
    word-break: break-word
}

.btn-menu-item.is-multiline:not(.is-secondary) .btn-menu-item-icon {
    align-self: unset;
    margin-top: unset
}

.btn-menu-item.is-secondary {
    font-size: .75rem
}

.btn-menu-item .checkbox-field-toggle {
    padding: 0
}

.btn-menu-item-avatar.active:before {
    --offset: -3px;
    content: " ";
    position: absolute;
    top: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    border: 1.5px solid var(--primary-color);
    border-radius: inherit
}

.btn-menu-items {
    pointer-events: none;
    max-width: inherit
}

.btn-menu-items .btn-menu-item {
    pointer-events: all
}

.btn-menu-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 4;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.btn-menu-overlay {
    left: -100vw;
    right: -100vw;
    top: -100vh;
    bottom: -100vh;
    width: auto !important;
    max-width: none !important
}

.btn-menu.has-footer {
    padding-bottom: 0
}

.btn-menu-footer {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    font-size: .875rem;
    color: #a2acb4;
    font-weight: 500;
    font-size: 12px
}

.btn-menu hr {
    padding: 0;
    margin: .3125rem 0;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    opacity: .6
}

html:not(.is-mobile) .btn-menu .badge {
    background-color: transparent;
    color: var(--secondary-text-color)
}

.btn-menu-reactions {
    max-width: 100%;
    max-height: 100%;
    height: inherit;
    border-radius: inherit;
    display: flex;
    align-items: center;
    padding: 0 .0625rem
}

.btn-menu-reactions-container {
    filter: drop-shadow(0 .125rem .5rem rgba(0, 0, 0, .24))
}

.btn-menu-reactions-container {
    --height: 2.5rem;
    --bubble-side-offset: -2.5rem;
    --other-side-offset: -1rem;
    --menu-offset: calc((var(--height) + .5rem) * -1);
    margin-top: var(--menu-offset);
    inset-inline-end: var(--bubble-side-offset);
    display: flex;
    height: var(--height);
    z-index: 4;
    border-radius: var(--height);
    transform-origin: inherit;
    -webkit-transform-origin-x: inherit;
    -webkit-transform-origin-y: bottom;
    justify-content: center;
    position: absolute;
    min-width: 3.5rem
}

.btn-menu-reactions-container:not(.is-visible) {
    opacity: 0 !important
}

.btn-menu-reactions-container-tags {
    --height: 3.5rem;
    height: auto;
    min-height: var(--height);
    border-radius: 1rem;
    flex-direction: column;
    min-width: 290px
}

.btn-menu-reactions-container-tags .btn-menu-reactions {
    height: 2.5rem
}

.btn-menu-reactions-container-tags .btn-menu-reactions-bubble {
    --height: 2.5rem
}

.btn-menu-reactions-description {
    --link-color: var(--primary-color);
    position: relative;
    font-size: 12px;
    color: var(--secondary-text-color);
    text-align: center;
    line-height: 14px;
    margin-top: .3125rem
}

.btn-menu-reactions-bubble {
    position: absolute;
    z-index: -1;
    background-color: inherit
}

.btn-menu-reactions-bubble-big {
    --size: 1rem;
    --offset: calc(var(--height) / 2);
    width: var(--size);
    height: calc(var(--size) / 2);
    right: var(--offset);
    bottom: calc(var(--size) / -2);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 1rem 1rem
}

.btn-menu-reactions-reaction {
    --size: 1.75rem;
    --padding-base: .25rem;
    --padding-vertical: 0rem;
    --padding-horizontal: var(--padding-base);
    width: calc(var(--size) + var(--padding-horizontal) * 2);
    height: calc(var(--size) + var(--padding-vertical) * 2);
    flex: 0 0 auto;
    padding: var(--padding-vertical) var(--padding-horizontal);
    cursor: pointer
}

.btn-menu-reactions-reaction-scale {
    width: 100%;
    height: 100%
}

.btn-menu-reactions-reaction .btn-menu-reactions-reaction-appear, .btn-menu-reactions-reaction .btn-menu-reactions-reaction-select {
    position: relative;
    width: 100%;
    height: 100%
}

.btn-menu-reactions-more {
    color: var(--secondary-text-color);
    background-color: transparent;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0 .125rem;
    margin-inline-end: .25rem
}

.btn-menu-reactions .currency-star-icon {
    width: 100%;
    height: 100%;
    padding: .0625rem
}

.btn-menu-item-with-auxiliary-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 114px
}

.btn-menu-item-auxiliary-text {
    font-weight: 400;
    opacity: .5
}

.floating-button-menu-container {
    position: fixed;
    transition: .2s;
    z-index: 10
}

.floating-button-menu-container--minimized.floating-button-menu-container--right-start {
    transform-origin: 0 0;
    transform: scale(.5);
    opacity: 0
}

.btn-primary {
    border-radius: 10px;
    width: 100%;
    text-align: center;
    height: 54px;
    border: none;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 0;
    transition: .2s opacity
}

html.no-touch .btn-primary:hover, html.no-touch .btn-primary:active {
    transition: .2s opacity;
    background: var(--dark-primary-color)
}

.btn-primary-transparent {
    --ripple-color: var(--light-primary-color);
    color: var(--primary-color);
    background-color: transparent
}

html.no-touch .btn-primary-transparent:hover, html.no-touch .btn-primary-transparent:active {
    background: var(--light-primary-color)
}

html.no-touch .btn-primary-transparent.danger:hover, html.no-touch .btn-primary-transparent.danger:active {
    background-color: var(--light-danger-color)
}

.btn-primary-transparent .preloader-circular .preloader-path {
    stroke: var(--primary-color)
}

body.animation-level-0 .btn-primary {
    transition: none
}

.btn-primary > svg, .btn-primary use {
    height: calc(100% - 20px);
    inset-inline-end: 15px;
    left: auto
}

.btn-primary:disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity)
}

.btn-transparent {
    color: var(--primary-text-color);
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 3rem;
    font-weight: 400;
    line-height: var(--line-height)
}

@media only screen and (max-width: 600px) {
    .btn-transparent {
        height: 3rem
    }
}

html.no-touch .btn-transparent:hover, html.no-touch .btn-transparent:active {
    background-color: var(--light-secondary-text-color)
}

html.no-touch .btn-transparent.danger:hover, html.no-touch .btn-transparent.danger:active {
    background-color: var(--light-danger-color)
}

html.no-touch .btn-transparent.primary:hover, html.no-touch .btn-transparent.primary:active {
    background-color: var(--light-primary-color)
}

.btn-transparent .button-icon {
    color: var(--secondary-text-color);
    font-size: 1.5rem;
    margin-inline-end: 2rem
}

@media only screen and (max-width: 600px) {
    .btn-transparent .button-icon {
        margin-inline-end: 1.5rem
    }
}

.btn-transparent.btn-short .button-icon {
    margin-inline-end: 1rem
}

.btn-control {
    width: auto;
    height: 2.5rem;
    line-height: 2.5rem;
    align-items: center;
    padding-inline: 1.125rem;
    margin: .9375rem auto 1rem;
    border-radius: 1.25rem;
    display: flex
}

.btn-control-small {
    height: 1.875rem;
    padding-inline: .75rem;
    font-size: .9375rem;
    width: auto;
    margin: 0;
    border-radius: .9375rem;
    line-height: 1;
    font-weight: var(--font-weight-bold)
}

body.animation-level-2 .btn-control-small {
    transition: width .2s, background-color .2s, color .2s
}

.btn-control-small.active {
    background-color: var(--light-primary-color) !important;
    color: var(--primary-color)
}

.btn-control .button-icon {
    font-size: 1.5rem;
    margin-inline-end: .375rem;
    margin-inline-start: -.375rem
}

.btn-primary.btn-circle .preloader-circular {
    height: calc(100% - 20px);
    right: auto;
    left: auto;
    margin: 0;
    top: 10px
}

.btn-primary.btn-circle .preloader-circular .preloader-path {
    stroke: #fff
}

.btn-menu-toggle {
    position: relative;
    overflow: visible !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    pointer-events: all !important
}

.btn-menu-toggle:not(.btn-primary):not(.btn-corner).menu-open {
    background-color: var(--light-secondary-text-color)
}

.btn-menu-toggle .btn-menu {
    margin-top: .5rem
}

.btn-circle {
    --size: 54px;
    border-radius: 50%;
    height: var(--size);
    width: var(--size);
    line-height: var(--size)
}

@media only screen and (max-width: 600px) {
    .btn-circle {
        --size: 46px
    }
}

.btn-disabled {
    pointer-events: none !important;
    cursor: default !important;
    color: var(--secondary-text-color) !important
}

.btn-disabled .button-icon {
    color: inherit !important
}

.btn-secondary {
    margin-top: -1rem !important
}

.btn-color-primary {
    background: var(--primary-color);
    color: #fff
}

.call-button {
    width: var(--call-button-size);
    height: var(--call-button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    position: relative;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px)
}

.call-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: var(--call-button-size)
}

.call-button-container.disabled, .call-button-container.disabled .call-button {
    pointer-events: none
}

.call-button-container.disabled .call-button, .call-button-container.disabled .call-button-text {
    opacity: .8
}

.call-button-text {
    white-space: nowrap;
    font-size: .875rem;
    margin-top: .25rem
}

body.animation-level-2 .call-button-text {
    transition: opacity var(--transition-standard-in)
}

body.animation-level-2 .call-button {
    transition: background-color var(--transition-standard-in), opacity var(--transition-standard-in)
}

.call-button + .call-button, .call-button-container + .call-button-container {
    margin-inline-start: var(--call-button-margin)
}

.btn-update {
    width: auto;
    padding: 0 2rem !important;
    border-radius: var(--size);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    inset-inline-end: auto !important
}

.btn-large {
    height: 3.375rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600
}

.animated-close-icon {
    position: absolute;
    transform: rotate(-45deg);
    pointer-events: none
}

.is-rtl .animated-close-icon {
    transform: rotate(135deg)
}

.animated-close-icon, .animated-close-icon:before, .animated-close-icon:after {
    width: 1.125rem;
    height: .125rem;
    border-radius: .125rem;
    background-color: var(--secondary-text-color)
}

.animated-close-icon:before, .animated-close-icon:after {
    position: absolute;
    left: 0;
    top: 0;
    content: ""
}

.animated-close-icon:before {
    transform: rotate(90deg)
}

body.animation-level-2 .animated-close-icon, body.animation-level-2 .animated-close-icon:before, body.animation-level-2 .animated-close-icon:after {
    transition: transform var(--slide-header-transition)
}

.animated-close-icon.state-back {
    transform: rotate(180deg)
}

.is-rtl .animated-close-icon.state-back {
    transform: rotate(0)
}

.animated-close-icon.state-back:before {
    transform: rotate(45deg) scaleX(.75) translateY(-.375rem)
}

.animated-close-icon.state-back:after {
    transform: rotate(-45deg) scaleX(.75) translateY(.375rem)
}

.animated-menu-icon {
    --color: var(--secondary-text-color);
    position: absolute
}

.animated-menu-icon, .animated-menu-icon:before, .animated-menu-icon:after {
    width: 1.125rem;
    height: .125rem;
    border-radius: .125rem;
    background-color: var(--color);
    transform: rotate(0)
}

.is-rtl .animated-menu-icon {
    transform: rotate(180deg)
}

body.animation-level-2 .animated-menu-icon, body.animation-level-2 .animated-menu-icon:before, body.animation-level-2 .animated-menu-icon:after {
    transition: transform .25s
}

.animated-menu-icon:before, .animated-menu-icon:after {
    position: absolute;
    left: 0;
    content: ""
}

.animated-menu-icon:before {
    top: -.3125rem
}

.animated-menu-icon:after {
    top: .3125rem
}

.animated-menu-icon.state-back {
    transform: rotate(180deg)
}

.is-rtl .animated-menu-icon.state-back {
    transform: rotate(0)
}

.animated-menu-icon.state-back:before {
    transform: rotate(45deg) scaleX(.75) translate(.375rem, -.1875rem)
}

.animated-menu-icon.state-back:after {
    transform: rotate(-45deg) scaleX(.75) translate(.375rem, .1875rem)
}

.animated-menu-close-icon {
    margin-top: -.625rem;
    transform: translate(0) rotate(0) !important
}

.animated-menu-close-icon:before {
    top: .3125rem;
    opacity: 1
}

body.animation-level-2 .animated-menu-close-icon:before {
    transition: transform .25s, opacity .125s 0s
}

.animated-menu-close-icon:after {
    top: .625rem
}

.animated-menu-close-icon.state-back {
    transform: translateY(.3125rem) rotate(135deg) !important
}

.animated-menu-close-icon.state-back:before {
    transform: rotate(45deg);
    opacity: 0
}

.animated-menu-close-icon.state-back:after {
    transform: translateY(-.625rem) rotate(90deg)
}

.animated-button-icon-icon {
    position: absolute;
    height: 1.5rem;
    line-height: 1.5rem;
    animation: hide-icon .4s forwards ease-in-out
}

body.animation-level-0 .animated-button-icon-icon {
    visibility: hidden;
    animation: none !important
}

.autocomplete-helper {
    --border-radius: 10px;
    position: absolute !important;
    bottom: calc(100% + .5rem);
    overflow: hidden;
    padding: 0 !important;
    border-radius: var(--border-radius) !important;
    max-width: 100%;
    inset-inline-start: 0;
    width: auto !important;
    color: var(--primary-text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface-color)
}

.autocomplete-helper:not(.is-visible) {
    display: none
}

.autocomplete-helper.is-visible {
    visibility: hidden
}

body.animation-level-2 .autocomplete-helper.is-visible {
    animation: fade-out-opacity .2s ease-in-out forwards;
    transition: visibility 0s .2s
}

.bubbles:not(.is-selecting) ~ .chat-input .autocomplete-helper.is-visible:not(.backwards), #stories-viewer .autocomplete-helper.is-visible:not(.backwards) {
    visibility: visible
}

body.animation-level-2 .bubbles:not(.is-selecting) ~ .chat-input .autocomplete-helper.is-visible:not(.backwards), body.animation-level-2 #stories-viewer .autocomplete-helper.is-visible:not(.backwards) {
    animation-name: fade-in-opacity;
    transition: visibility 0s 0s
}

@media only screen and (max-width: 319px) {
    .autocomplete-helper {
        max-width: calc(100vw - var(--padding-horizontal) * 4)
    }
}

.autocomplete-peer-helper .scrollable {
    position: relative;
    max-height: 232px
}

.autocomplete-peer-helper-list {
    padding: .5rem 0
}

.autocomplete-peer-helper-list-element {
    height: 3.125rem;
    display: flex;
    padding-block: 0;
    padding-inline: .75rem 2.125rem;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    line-height: var(--line-height)
}

@media only screen and (max-width: 600px) {
    .autocomplete-peer-helper-list-element {
        padding-right: .75rem
    }
}

.autocomplete-peer-helper-list-element-name {
    margin-inline-start: .875rem;
    font-weight: var(--font-weight-bold);
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.autocomplete-peer-helper-list-element-description {
    margin-inline-start: .5625rem;
    color: var(--secondary-text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.autocomplete-peer-helper-list-element-name, .autocomplete-peer-helper-list-element-description {
    flex: 0 1 auto
}

.autocomplete-peer-helper-list-element-avatar {
    flex: 0 0 auto
}

.badge {
    --size: 1.375rem;
    --padding: .4375rem;
    border-radius: calc(var(--size) / 2);
    font-weight: var(--font-weight-bold);
    color: var(--badge-text-color);
    font-size: .875rem;
    text-align: center;
    height: var(--size);
    min-width: var(--size);
    line-height: var(--size) !important;
    padding: 0 var(--padding)
}

body.animation-level-2 .badge {
    transition: background-color .2s ease-in-out
}

.badge.is-badge-empty {
    display: none
}

.badge-18 {
    --size: 1.125rem;
    --padding: .125rem
}

.badge-20 {
    --size: 1.25rem;
    --padding: .375rem
}

.badge-24 {
    --size: 1.5rem;
    --padding: .5rem
}

.badge-icon {
    font-size: var(--size);
    padding: 0
}

.badge-primary {
    background-color: var(--primary-color)
}

.badge-gray {
    background-color: var(--secondary-color)
}

.ckin__player {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.ckin__player.ckin__fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    border-radius: 0 !important;
    display: flex
}

.ckin__player.ckin__fullscreen .ckin__video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.ckin__time {
    margin-left: .875rem;
    font-size: .875rem;
    color: #fff
}

@media only screen and (max-width: 600px) {
    .ckin__time {
        margin-left: 1.125rem
    }
}

.default {
    position: relative;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.default.show-controls:not(.default-live) .ckin__video {
    cursor: pointer
}

.default__button {
    color: #fff
}

.default__button--big {
    background: none;
    border: 0;
    line-height: 1;
    color: #fff;
    text-align: center;
    outline: 0;
    padding: 0;
    position: absolute;
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);
    font-size: 4rem
}

@media only screen and (min-width: 601px) {
    .default__button--big {
        pointer-events: none
    }
}

body.animation-level-2 .default__button--big {
    transition: opacity var(--layer-transition)
}

@media only screen and (max-width: 600px) {
    .default__button--big {
        font-size: 3rem
    }
}

.default__controls {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: start;
    direction: ltr;
    z-index: 6
}

body.animation-level-2 .default__controls {
    transition: transform var(--layer-transition)
}

.default__controls .btn-menu {
    margin-bottom: .25rem
}

.default__controls .progress-line {
    margin: 0 16px;
    border-radius: var(--border-radius);
    background: #ffffff61
}

.default__controls .progress-line__filled {
    background: var(--primary-color)
}

.default__controls .progress-line__loaded {
    background-color: #fff
}

@media only screen and (max-width: 600px) {
    .default__controls .progress-line {
        margin-bottom: -1px
    }
}

.default__gradient-bottom {
    height: 49px;
    padding-top: 49px;
    bottom: 0;
    z-index: 2;
    width: 100%;
    position: absolute;
    background: linear-gradient(transparent, #000000b3);
    pointer-events: none;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

body.animation-level-2 .default__gradient-bottom {
    transition: transform var(--layer-transition)
}

@media only screen and (max-width: 600px) {
    .default:not(.ckin__fullscreen) .default__gradient-bottom {
        display: none
    }
}

.default__gradient-bottom {
    transform: translate3d(0, 50px, 0)
}

.default__controls {
    transform: translate3d(0, 52px, 0)
}

@media only screen and (max-width: 600px) {
    .default__controls {
        transform: translate3d(0, 65px, 0)
    }
}

.default.show-controls .default__gradient-bottom, .default.show-controls .default__controls {
    transform: translateZ(0)
}

.default.is-playing:not(.show-controls):not(:has(.speed-drag-handler__speed-tip--visible)) {
    cursor: none
}

.default.is-playing:has(.speed-drag-handler__speed-tip--visible) {
    cursor: pointer
}

.default.is-playing .default__button--big, .default:not(.played) .default__button--big, .default.is-seeking .default__button--big {
    opacity: 0
}

.default .player-volume {
    --icon-size: 2.25rem;
    --icon-margin-right: .5rem;
    --selector-size: 50px;
    --selector-thumb-size: .75rem;
    --hide-width: var(--icon-size);
    --show-width: calc(var(--icon-size) + var(--icon-margin-right) + var(--selector-size) + var(--selector-thumb-size) * .75);
    display: flex;
    align-items: center;
    width: var(--hide-width);
    overflow: hidden
}

body.animation-level-2 .default .player-volume {
    transition: width var(--layer-transition)
}

html.is-touch .default .player-volume {
    display: none
}

html:not(.is-touch) .default .player-volume + .ckin__time {
    margin-left: .5rem
}

html.no-touch .default .player-volume:hover, html.no-touch .default .player-volume:active {
    width: var(--show-width)
}

.default .player-volume__icon {
    color: #fff;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--icon-margin-right);
    cursor: pointer;
    padding: .375rem;
    font-size: 1.5rem;
    display: flex;
    pointer-events: all
}

.default .player-volume .progress-line {
    --color: #fff;
    --thumb-size: var(--selector-thumb-size);
    --height: 4px;
    margin: 0;
    width: var(--selector-size);
    min-width: var(--selector-size)
}

html.is-ios .default .player-volume .progress-line {
    display: none
}

.default.is-buffering .default__button--big {
    display: none !important
}

.admin-popup-container {
    position: absolute;
    opacity: 1
}

body.animation-level-2 .admin-popup-container {
    transition: opacity var(--transition-standard-in)
}

.admin-popup-container.admin-hidden {
    opacity: 0;
    pointer-events: none
}

video::-webkit-media-controls-enclosure {
    display: none !important
}

.progress-line {
    --color: var(--primary-color);
    --height: 5px;
    --border-radius: 6px;
    --thumb-size: 13px;
    --focus-scale: 1.125;
    border-radius: var(--border-radius);
    height: var(--height);
    position: relative;
    cursor: pointer
}

.progress-line:before {
    position: absolute;
    inset: 0;
    display: block;
    content: " ";
    border-radius: inherit
}

.progress-line__seek {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    width: 100%;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    caret-color: var(--color);
    position: absolute;
    top: -.5rem;
    bottom: -.5rem
}

.progress-line__seek:focus {
    outline: none
}

.progress-line__seek::-webkit-slider-thumb {
    display: none
}

.progress-line__seek::-moz-range-thumb {
    display: none;
    width: 0;
    height: 0
}

.progress-line__seek::-moz-range-track {
    display: none
}

.progress-line__seek::-webkit-slider-runnable-track {
    display: none
}

.progress-line__filled {
    max-width: 100%
}

.progress-line__filled:not(.progress-line__loaded) {
    background-color: var(--color);
    z-index: 1
}

.progress-line__filled:not(.progress-line__loaded):after {
    content: " ";
    display: block;
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background-color: var(--color);
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0;
    top: calc((var(--thumb-size) - var(--height)) / -2);
    transform: translate(calc(var(--thumb-size) / 2 * var(--reflect))) scale(1)
}

body.animation-level-2 .progress-line__filled:not(.progress-line__loaded):after {
    transition: transform .125s ease-in-out
}

.progress-line.is-focused .progress-line__filled:not(.progress-line__loaded):after {
    transform: translate(calc(var(--thumb-size) / 2 * var(--reflect))) scale(var(--focus-scale))
}

.progress-line__loaded, .progress-line:before {
    opacity: .3;
    background-color: var(--secondary-color)
}

.progress-line__filled, .progress-line__loaded {
    border-radius: var(--border-radius);
    position: absolute;
    top: 0;
    bottom: 0
}

body.animation-level-2 .progress-line.with-transition .progress-line__filled {
    transition: width .2s
}

.progress-line.use-transform .progress-line__filled {
    width: 100%;
    transform-origin: var(--transform-origin-left-center)
}

input[type=range]::-ms-track {
    visibility: hidden
}

input[type=range]::-ms-ticks {
    background: none;
    color: none;
    border: none
}

input[type=range]::-ms-thumb {
    visibility: hidden
}

input[type=range]::-ms-tooltip {
    visibility: hidden
}

.left-controls, .right-controls {
    display: flex;
    align-items: center
}

.bottom-controls {
    padding: 0 .625rem;
    height: 2.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 600px) {
    .bottom-controls {
        height: 3.625rem
    }
}

.loading {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .5) 50%, transparent 100%);
    animation: rtmp-loading-animation 1.5s infinite cubic-bezier(.4, 0, .2, 1)
}

@keyframes rtmp-loading-animation {
    0%, 10% {
        transform: translate(-100%)
    }
    to {
        transform: translate(100%)
    }
}

.loading_bezel-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.loading_bezel-wrap .loading {
    height: calc(100% + 8px);
    margin-top: -4px
}

.loading-wrap {
    transition: opacity var(--transition-standard-in);
    opacity: 0;
    border-radius: inherit
}

.loading-wrap.is-loading {
    opacity: 1 !important
}

.default-live {
    border-radius: 10px
}

@media only screen and (max-width: 600px) {
    .default-live {
        border-radius: 0
    }
}

.default-live .ckin__video {
    border-radius: 10px
}

@media only screen and (max-width: 600px) {
    .default-live .ckin__video {
        border-radius: 0
    }
}

.default-live.dim-background {
    background: #000
}

.default-live .bottom-controls {
    padding: .5rem;
    height: auto
}

.default-live .right-controls {
    gap: .25rem
}

.default-live.is-buffering .loading-wrap {
    opacity: 1
}

.default-live .controls-live {
    background: linear-gradient(75deg, #4588e3 -79.42%, #976fff 20.35%, #e46ace 100.03%), #ea3323;
    display: flex;
    padding: 4px 7px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    color: #fff;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    transition: filter var(--transition-standard-in);
    margin: 8px;
    filter: grayscale(1)
}

.default-live .controls-live.is-not-buffering {
    filter: none
}

.default-live .btn-menu-toggle {
    color: #fff !important
}

.default-live .player-volume {
    margin: 0 2px
}

.checkbox-field {
    --size: 1.25rem;
    --offset-left: 0px;
    margin: 1.5rem 1.1875rem;
    display: block;
    text-align: start;
    position: relative;
    cursor: pointer;
    min-width: var(--size);
    min-height: var(--size)
}

body.animation-level-2 .checkbox-field {
    transition: .2s opacity
}

.checkbox-field.checkbox-disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity)
}

@media only screen and (max-width: 600px) {
    .checkbox-field {
        margin-bottom: 27px
    }
}

.checkbox-field .checkbox-box {
    position: absolute;
    inset-inline-start: var(--offset-left);
    top: 50%;
    transform: translateY(-50%);
    width: var(--size);
    height: var(--size);
    border-radius: .3125rem;
    overflow: hidden;
    pointer-events: none
}

html.is-safari .checkbox-field .checkbox-box {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
}

.checkbox-field .checkbox-box-check, .checkbox-field .checkbox-box-background, .checkbox-field .checkbox-box-border {
    position: absolute;
    top: 0;
    left: 0
}

.checkbox-field .checkbox-box-border {
    inset-inline: 0;
    bottom: 0;
    border-radius: inherit;
    border: 2px solid #8d969c
}

.checkbox-field .checkbox-box-background {
    inset: -15%;
    background-color: var(--primary-color);
    transform: scale(0);
    border-radius: 50%;
    transition: transform .2s .05s ease-in-out
}

body.animation-level-0 .checkbox-field .checkbox-box-background {
    transition: none !important
}

.checkbox-field .checkbox-box-check {
    --offset: 7px;
    width: calc(var(--size) - var(--offset));
    height: calc(var(--size) - var(--offset));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.checkbox-field .checkbox-box-check use {
    stroke: #fff;
    stroke-width: 3.75;
    stroke-linecap: round;
    stroke-dasharray: 0, 24.19;
    stroke-dashoffset: 0;
    transition: stroke-dasharray .1s ease-in-out, visibility 0s .1s;
    visibility: hidden
}

body.animation-level-0 .checkbox-field .checkbox-box-check use {
    transition: none !important
}

.checkbox-field .checkbox-caption {
    position: relative;
    padding-inline-start: 3.375rem;
    transition: .2s opacity;
    color: inherit;
    pointer-events: none;
    line-height: var(--line-height);
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

body.animation-level-0 .checkbox-field .checkbox-caption {
    transition: none
}

.checkbox-field.hover-effect {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding: 0 1.1875rem;
    margin-left: 0;
    margin-right: 0
}

.checkbox-field.hover-effect .checkbox-box {
    inset-inline-start: auto
}

.checkbox-field .anchor-url {
    pointer-events: all
}

.checkbox-ripple {
    overflow: hidden;
    border-radius: 10px
}

.checkbox-ripple .checkbox-box, .checkbox-ripple .checkbox-caption {
    pointer-events: none
}

.checkbox-field-round {
    --size: 1.5rem
}

.checkbox-field-round .checkbox-box {
    border-radius: 50%;
    overflow: auto
}

.checkbox-field-round .checkbox-box-background {
    inset: 0
}

.checkbox-field-round .checkbox-box-border {
    border: 2px solid var(--secondary-color);
    z-index: 1
}

.checkbox-field-round .checkbox-box-check {
    --offset: calc(var(--size) - (var(--size) / 2 + .125rem))
}

html.is-safari .checkbox-field-round .checkbox-box {
    -webkit-mask-image: none
}

.radio-field {
    --size: 1.375rem;
    --offset-left: 0px;
    position: relative;
    text-align: start;
    margin: 1.25rem 0;
    line-height: var(--line-height);
    cursor: pointer
}

.radio-field.hidden-widget {
    cursor: default
}

.radio-field.hidden-widget .radio-field-main:before, .radio-field.hidden-widget .radio-field-main:after {
    visibility: hidden
}

.radio-field > input:checked ~ .radio-field-main:before {
    border-color: var(--primary-color)
}

.radio-field > input:checked ~ .radio-field-main:after {
    transform: translateY(-50%) scale(1)
}

.radio-field .radio-field-main {
    padding-inline-start: 3.5rem;
    position: relative;
    color: inherit
}

.radio-field .radio-field-main:before, .radio-field .radio-field-main:after {
    content: "";
    display: block;
    position: absolute;
    inset-inline-start: var(--offset-left);
    top: 50%;
    width: var(--size);
    height: var(--size);
    transform: translateY(-50%)
}

.radio-field .radio-field-main:before {
    border: 2px solid var(--secondary-text-color);
    border-radius: 50%;
    opacity: 1
}

body.animation-level-2 .radio-field .radio-field-main:before {
    transition: border-color .1s ease, opacity .1s ease
}

.radio-field .radio-field-main:after {
    inset-inline-start: calc(var(--offset-left) + .3125rem);
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--primary-color);
    transform: translateY(-50%) scale(0);
    transform-origin: center
}

body.animation-level-2 .radio-field .radio-field-main:after {
    transition: transform .1s ease
}

.radio-field .radio-field-main.is-locked:before, .radio-field .radio-field-main.is-locked:after {
    display: none
}

.radio-field-lock {
    position: absolute;
    inset-inline-start: var(--offset-left);
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text-color);
    font-size: 1.5rem
}

.radio-field.radio-field-right .radio-field-main:before {
    inset-inline: auto 0
}

.radio-field.radio-field-right .radio-field-main:after {
    inset-inline: auto .3125rem
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0;
    opacity: 0;
    z-index: var(--z-below);
    position: absolute
}

.checkbox-field .checkbox-field-input:checked:not(.is-fake-disabled) + .checkbox-box .checkbox-box-check use {
    stroke-dasharray: 24.19, 24.19;
    visibility: visible;
    transition: stroke-dasharray .1s .15s ease-in-out, visibility 0s .15s
}

.checkbox-field .checkbox-field-input:checked:not(.is-fake-disabled) + .checkbox-box .checkbox-box-background {
    transition: transform .2s 0s ease-in-out;
    transform: scale(1)
}

.checkbox-field .checkbox-field-input:disabled + .checkbox-box, .checkbox-field .checkbox-field-input:disabled ~ .checkbox-caption {
    cursor: default;
    opacity: var(--disabled-opacity)
}

.checkbox-field-restriction .checkbox-box-border {
    display: none
}

.checkbox-field-restriction .checkbox-box-background {
    transform: none !important;
    transition: background-color .2s !important
}

.checkbox-field-restriction .checkbox-box-check use {
    visibility: visible !important;
    stroke-dasharray: 24.19, 24.19 !important;
    transform: rotate(0) translateY(0);
    transition: stroke-dashoffset .2s ease-in-out, transform .2s ease-in-out !important
}

.checkbox-field-restriction [type=checkbox]:not(:checked) + .checkbox-box .checkbox-box-check use {
    transform: rotate(45deg) translateY(-10px);
    stroke-dashoffset: 35.5
}

.checkbox-field-restriction [type=checkbox]:not(:checked) + .checkbox-box .checkbox-box-background {
    background-color: var(--danger-color)
}

.checkbox-field-toggle {
    --size: 20px;
    margin: 0 .3125rem;
    padding: 0 .25rem;
    display: flex;
    align-items: center;
    pointer-events: none
}

.checkbox-field-toggle .checkbox-toggle {
    --offset: 3px;
    --toggle-width: 1.9375rem;
    width: var(--toggle-width);
    height: .875rem;
    background-color: var(--secondary-color);
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 var(--offset)
}

body.animation-level-2 .checkbox-field-toggle .checkbox-toggle {
    transition: background-color .1s
}

.checkbox-field-toggle .checkbox-toggle-circle {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--secondary-color);
    background-color: var(--surface-color);
    content: " ";
    transform: translate(calc(var(--offset) * var(--reflect) * -1));
    border-radius: 50%;
    position: absolute;
    inset-inline-start: 0
}

body.animation-level-2 .checkbox-field-toggle .checkbox-toggle-circle {
    transition: border-color .1s, transform .1s cubic-bezier(.22, .75, .7, 1.3)
}

.checkbox-field-toggle .checkbox-toggle-circle.with-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem
}

.checkbox-field-toggle-restriction .checkbox-toggle {
    background-color: var(--danger-color)
}

.checkbox-field-toggle-restriction .checkbox-toggle-circle {
    border-color: var(--danger-color);
    color: var(--danger-color)
}

.checkbox-field-toggle [type=checkbox]:checked:not(.is-fake-disabled) + .checkbox-toggle {
    background-color: var(--primary-color)
}

.checkbox-field-toggle [type=checkbox]:checked:not(.is-fake-disabled) + .checkbox-toggle .checkbox-toggle-circle {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translate(calc((var(--toggle-width) - 1.25rem + var(--offset)) * var(--reflect)))
}

.chatlist-container {
    position: relative
}

@media only screen and (max-width: 600px) {
    .chatlist-container .search-group-recent.search-group {
        padding: 2px 0 0
    }
}

.chatlist-container .search-group {
    width: 100%;
    padding: 1rem 0 .5rem;
    margin-bottom: 17px
}

@media only screen and (max-width: 600px) {
    .chatlist-container .search-group {
        margin-bottom: 0
    }
}

.chatlist-container .search-group__name {
    color: var(--secondary-text-color);
    padding: 0 23px;
    padding-bottom: 1rem;
    font-weight: var(--font-weight-bold);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media only screen and (max-width: 600px) {
    .chatlist-container .search-group__name {
        padding: 5px 9px 0 16px;
        font-size: 15px
    }
}

.chatlist-container .search-group-contacts {
    border-bottom: 1px solid var(--border-color)
}

@media only screen and (max-width: 600px) {
    .chatlist-container .search-group-contacts {
        padding: 0 0 2px
    }
}

.chatlist-container .search-group-people.search-group-contacts {
    padding: 5px 0 !important
}

.chatlist-container .search-group:last-child {
    border-bottom: none
}

.chatlist-container .search-super .search-group {
    margin-bottom: 0;
    padding: 0 0 .5rem
}

.chatlist-container .search-super .search-group__name {
    padding-top: 1rem;
    display: flex;
    justify-content: space-between
}

ul.chatlist {
    padding: 0 .5rem
}

@media only screen and (max-width: 600px) {
    ul.chatlist {
        padding: 0
    }
}

.chatlist {
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    background-color: var(--surface-color);
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

.chatlist-chat {
    --background: unset;
    background: var(--background) !important;
    -webkit-user-drag: none
}

html.no-touch .chatlist-chat:hover, html.no-touch .chatlist-chat:active, .chatlist-chat.menu-open, .chatlist-chat.is-forum-open {
    --background: var(--light-filled-secondary-text-color)
}

body:not(.animation-level-0) .chatlist-chat.is-muted.animating:not(.backwards) .dialog-muted-icon {
    animation: fade-in-opacity .2s ease-in-out forwards
}

body:not(.animation-level-0) .chatlist-chat.is-muted.animating.backwards .dialog-muted-icon {
    animation: fade-in-backwards-opacity .2s ease-in-out forwards
}

.chatlist-chat .text-highlight {
    color: var(--primary-text-color);
    font-weight: var(--font-weight-bold);
    font-style: normal
}

.chatlist-chat .premium-icon {
    margin-top: -.125rem
}

.chatlist-chat .topic-icon {
    flex: 0 0 auto
}

.chatlist-chat .row-title .topic-icon {
    --size: 1.375rem;
    margin-inline-end: .25rem
}

.chatlist-chat .topic-name .topic-icon {
    display: inline;
    line-height: 1 !important
}

.chatlist-chat .topic-name .topic-icon-svg {
    position: relative
}

.chatlist-chat .topic-name .topic-icon-content {
    left: 0;
    margin-top: -6px;
    position: absolute;
    right: 0;
    top: 0
}

@media only screen and (min-width: 601px) {
    .chatlist-chat.active {
        --background: var(--primary-color) !important
    }

    .chatlist-chat.active .row-subtitle, .chatlist-chat.active .row-title, .chatlist-chat.active .dialog-subtitle-badge-pinned, .chatlist-chat.active .user-title, .chatlist-chat.active .message-status, .chatlist-chat.active .text-highlight, .chatlist-chat.active .premium-icon, .chatlist-chat.active .verified-icon, .chatlist-chat.active .sending-status-icon, .chatlist-chat.active .dialog-subtitle-ico {
        color: #fff !important
    }

    .chatlist-chat.active .avatar-stories-svg-circle {
        stroke: #fff !important
    }

    .chatlist-chat.active .badge-fake {
        color: #fff;
        border-color: #fff
    }

    .chatlist-chat.active .primary-text, .chatlist-chat.active .danger {
        color: #fff !important
    }

    .chatlist-chat.active .dialog-muted-icon {
        color: #ffffffb3
    }

    .chatlist-chat.active .verified-icon-background {
        fill: #fff !important
    }

    .chatlist-chat.active .verified-icon-check {
        visibility: hidden
    }

    .chatlist-chat.active .dialog-avatar.is-online:after, .chatlist-chat.active .dialog-group-call-icon {
        background-color: #fff;
        border-color: var(--primary-color)
    }

    .chatlist-chat.active .badge.unread, .chatlist-chat.active .mention, .chatlist-chat.active .dialog-subtitle-badge-reaction {
        background-color: #fff !important;
        color: var(--primary-color)
    }

    .chatlist-chat.active .peer-typing-container {
        --color: #fff
    }
}

.chatlist .peer-typing-container {
    --color: var(--secondary-text-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.chatlist .peer-typing-container .peer-typing-text {
    display: inline-flex;
    transform: translateY(-2px)
}

.chatlist .sending-status-icon-premium_lock {
    font-size: .8125rem;
    margin: .1875rem 0 0 .5rem;
    color: var(--secondary-color)
}

.chatlist .dialog-avatar, .chatlist .row-row {
    pointer-events: none;
    position: relative
}

.chatlist .user-title {
    display: flex !important;
    align-items: center
}

.chatlist .user-title .emoji-image {
    vertical-align: top;
    margin-top: 1px;
    width: 18px;
    height: 18px
}

.chatlist .user-last-message .emoji-image {
    width: 20px;
    height: 20px;
    margin-top: -3px
}

.chatlist .user-title, .chatlist .user-last-message {
    flex-grow: 1;
    position: relative
}

.chatlist .message-status {
    margin-inline-end: .125rem;
    display: inline-block;
    vertical-align: middle;
    color: var(--chatlist-status-color);
    line-height: 1;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
    position: relative;
    margin-top: -.0625rem
}

.chatlist .message-status:before {
    vertical-align: middle
}

.chatlist .mention {
    padding: 0;
    background-color: var(--chatlist-status-color) !important;
    line-height: 1.25rem !important
}

.chatlist .mention-badge {
    margin-inline-end: -.125rem
}

.chatlist .unread, .chatlist .is-muted.backwards .unread {
    background-color: var(--chatlist-status-color)
}

.chatlist .is-muted .unread, .chatlist .no-unmuted-topic .unread {
    background-color: var(--secondary-color)
}

.chatlist .not-visited {
    --size: .5rem;
    --padding: 0;
    background-color: var(--secondary-color) !important
}

.chatlist-parts.with-contacts .chatlist-top:not(.with-placeholder) {
    height: auto
}

.chatlist-parts.with-contacts .chatlist-top.with-placeholder.has-contacts {
    height: 24.125rem
}

.chatlist-parts.with-contacts .chatlist-top.with-placeholder .empty-placeholder-dialogs {
    top: 50%
}

.chatlist-top-notification {
    margin: 0 .5rem .5rem;
    background-color: var(--light-filled-secondary-text-color)
}

.chatlist-top-notification-container {
    height: 0;
    overflow: hidden
}

body.animation-level-2 .chatlist-top-notification-container {
    transition: height var(--transition-standard-in)
}

.chatlist-top-notification-container.is-visible:not(.backwards) {
    height: 4rem
}

.chatlist-top-notification .row-icon {
    position: absolute;
    right: .5rem;
    font-size: 1.5rem;
    color: var(--secondary-text-color)
}

.chatlist-top {
    height: 100%
}

.chatlist-bottom {
    max-height: 36.375rem
}

.chatlist-bottom .sidebar-left-section {
    padding-bottom: 0;
    margin-bottom: 0 !important
}

.chatlist-bottom .chatlist-new {
    padding: 0
}

.virtual-chatlist {
    position: relative;
    margin: 0 .5rem !important;
    padding: 0 !important;
    width: auto !important
}

.dialog-title-details {
    font-size: .75rem;
    padding: 1px 0 0;
    flex: 0 0 auto;
    margin-inline-start: .5rem !important
}

.dialog-subtitle-flex {
    display: flex
}

.has-only-pinned-badge:not(.animating) .dialog-subtitle-flex {
    margin-inline-end: 1.5rem
}

.dialog-subtitle-span {
    flex: 0 0 auto;
    max-width: 100%
}

.dialog-subtitle-span-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre
}

.dialog-subtitle-span-last {
    flex: unset;
    max-width: none;
    white-space: nowrap
}

.dialog-subtitle-badge {
    display: block !important;
    margin-inline-start: .5rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 1
}

.dialog-subtitle-badge.avatar-badge {
    --size: 1.625rem;
    margin: 0;
    position: absolute;
    right: calc(100% - 4.0625rem);
    top: 2.4375rem;
    border: 2px solid var(--background, var(--surface-color));
    pointer-events: none;
    line-height: 23px !important
}

.dialog-subtitle-badge-reaction {
    padding: 0;
    background-color: var(--danger-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: 1
}

.dialog-subtitle-badge-mention {
    order: 2
}

.dialog-subtitle-badge-unread {
    order: 3
}

.dialog-subtitle-badge-pinned {
    color: var(--chatlist-pinned-color);
    order: 4;
    z-index: 0
}

.has-multiple-badges .dialog-subtitle-badge-pinned {
    margin-inline-start: -1.375rem
}

.dialog-subtitle-media {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    position: relative;
    flex: 0 0 auto;
    border-radius: .25rem;
    margin-inline-end: .375rem;
    display: inline-block
}

.dialog-subtitle-media:before {
    content: " ";
    display: inline-block;
    width: inherit;
    height: inherit;
    min-width: inherit;
    min-height: inherit
}

.dialog-subtitle-media.is-round {
    border-radius: 50%
}

.dialog-subtitle-media.is-round .dialog-subtitle-media-play {
    font-size: .875rem
}

.dialog-subtitle-media-play {
    position: absolute;
    z-index: 1;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-size: 1rem
}

.dialog-subtitle-media .media-photo {
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit;
    top: auto;
    bottom: auto
}

.dialog-subtitle-ico {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    line-height: 18px;
    color: var(--chatlist-pinned-color)
}

.dialog-subtitle-ico-storyreply {
    font-size: 18px;
    margin-inline-end: .125rem
}

.dialog-group-call-icon {
    position: absolute;
    inset-inline-start: 45px;
    top: 45px;
    border: 2px solid var(--surface-color);
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--avatar-online-color);
    width: 20px;
    height: 20px;
    z-index: 2
}

body.animation-level-2 .dialog-subtitle-badge, body.animation-level-2 .dialog-group-call-icon {
    transition: none;
    transform: scale(0);
    opacity: 1
}

body.animation-level-2 .dialog-subtitle-badge.is-visible:not(.backwards), body.animation-level-2 .dialog-group-call-icon.is-visible:not(.backwards) {
    transform: scale(1)
}

body.animation-level-2 .dialog-subtitle-badge.backwards, body.animation-level-2 .dialog-group-call-icon.backwards {
    opacity: 0
}

body.animation-level-2 .dialog-subtitle-badge.animating, body.animation-level-2 .dialog-group-call-icon.animating {
    transition: background-color var(--chatlist-badge-transition-in), transform var(--chatlist-badge-transition-in)
}

body.animation-level-2 .dialog-subtitle-badge.animating.backwards, body.animation-level-2 .dialog-group-call-icon.animating.backwards {
    transition: background-color var(--chatlist-badge-transition-out), transform var(--chatlist-badge-transition-out), opacity var(--chatlist-badge-transition-out)
}

.dialog-avatar {
    flex: 0 0 auto
}

body.animation-level-2 .dialog-avatar:after {
    transition: none;
    transform: scale(0);
    opacity: 1
}

body.animation-level-2 .dialog-avatar.is-visible:not(.backwards):after {
    transform: scale(1)
}

body.animation-level-2 .dialog-avatar.backwards:after {
    opacity: 0
}

body.animation-level-2 .dialog-avatar.animating:after {
    transition: background-color var(--chatlist-badge-transition-in), transform var(--chatlist-badge-transition-in)
}

body.animation-level-2 .dialog-avatar.animating.backwards:after {
    transition: background-color var(--chatlist-badge-transition-out), transform var(--chatlist-badge-transition-out), opacity var(--chatlist-badge-transition-out)
}

.dialog-muted-icon {
    flex: 0 0 auto;
    color: var(--chatlist-pinned-color);
    font-size: 1.125rem;
    margin-inline-start: .125rem
}

.chat-input {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    flex: 0 0 auto;
    position: relative
}

.chat-input-container {
    --padding-horizontal: var(--chat-input-padding);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: var(--chat-input-max-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--padding-horizontal);
    flex: 0 0 auto;
    position: relative
}

.chat-input-container .btn-circle {
    width: var(--chat-input-size);
    height: var(--chat-input-size)
}

.chat-input .menu-send {
    top: auto;
    bottom: calc(100% + .5rem)
}

.chat-input .chat-input-secondary-button {
    padding: 0
}

.chat-input .btn-record-cancel {
    --multiplier: -1;
    visibility: hidden;
    opacity: 0;
    z-index: 3;
    position: absolute;
    inset-inline-end: calc(.5rem + var(--chat-input-size) + var(--padding-horizontal));
    color: var(--danger-color) !important
}

html.no-touch .chat-input .btn-record-cancel:hover:after, html.no-touch .chat-input .btn-record-cancel:active:after {
    background-color: var(--light-danger-color)
}

.chat-input .btn-record-cancel .c-ripple__circle {
    background-color: var(--light-danger-color)
}

.is-rtl .chat-input .btn-record-cancel {
    --multiplier: 1
}

.chat-input .btn-scheduled:after {
    content: "";
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--message-checkbox-color)
}

.chat-input .btn-preloader .preloader {
    width: 1.5rem;
    height: 1.5rem
}

.chat-input .btn-preloader .preloader .preloader-path {
    stroke: var(--secondary-text-color)
}

body.animation-level-2 .chat-input .btn-preloader.show.backwards {
    animation: hide-icon .4s forwards ease-in-out !important
}

.chat-input .float {
    align-self: center;
    display: none !important;
    margin: 0 !important;
    margin-inline-end: .75rem !important
}

body.animation-level-2 .chat-input .float {
    animation: grow-icon .4s forwards ease-in-out !important
}

@media only screen and (max-height: 569px), only screen and (max-width: 600px) {
    .chat-input .float {
        margin-inline-end: .125rem !important
    }
}

.chat-input:not(.is-recording) .float.show:not(.hide) {
    display: flex !important
}

.chat-input .btn-send-container {
    position: absolute;
    inset-inline-end: var(--padding-horizontal);
    bottom: 0;
    padding-bottom: inherit;
    display: flex;
    align-items: center;
    justify-content: center
}

.chat-input .btn-send-container .btn-menu-overlay {
    z-index: 3
}

@media only screen and (max-width: 925px) {
    .chat-input .btn-send-container .btn-menu-reactions-container {
        --bubble-side-offset: 0
    }

    .chat-input .btn-send-container .btn-menu-reactions-bubble {
        display: none
    }
}

.chat-input .btn-icon {
    transition: .2s opacity
}

body.animation-level-0 .chat-input .btn-icon {
    transition: none
}

.chat-input .btn-send, .chat-input .btn-cancel-record {
    box-shadow: 0 1px 8px 1px #0000001f
}

.chat-input .btn-send {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    z-index: 3;
    opacity: 1 !important
}

.is-rtl .chat-input .btn-send {
    transform: scaleX(-1)
}

html.no-touch .chat-input .btn-send:hover, html.no-touch .chat-input .btn-send:active {
    background-color: var(--dark-primary-color) !important
}

.chat-input .btn-send .btn-send-icon-edit {
    font-size: 2rem;
    font-weight: var(--font-weight-bold)
}

.chat-input .btn-send.send .btn-send-icon-send, .chat-input .btn-send.record .btn-send-icon-record, .chat-input .btn-send.edit .btn-send-icon-edit, .chat-input .btn-send.schedule .btn-send-icon-schedule, .chat-input .btn-send.forward .btn-send-icon-forward {
    visibility: visible !important;
    animation: grow-icon .4s forwards ease-in-out !important
}

.chat-input .btn-record-cancel, .chat-input .btn-send {
    font-size: 1.5rem;
    line-height: 1.5rem
}

.chat-input .record-time {
    color: var(--primary-text-color);
    line-height: 1;
    align-self: center;
    display: none
}

.chat-input .record-time:after {
    content: " ";
    width: 10px;
    height: 10px;
    background-color: var(--danger-color);
    border-radius: 50%;
    margin-inline: 9px;
    display: inline-block
}

body.animation-level-2 .chat-input .record-time:after {
    animation: recordBlink 1.25s infinite
}

.chat-input .record-ripple {
    border-radius: 50%;
    background-color: var(--message-highlighting-color);
    width: 300px;
    height: 300px;
    transform: scale(0);
    position: absolute;
    visibility: hidden;
    opacity: .5
}

@media only screen and (max-width: 600px) {
    .chat-input .record-ripple {
        width: 240px;
        height: 240px
    }
}

.chat-input.is-locked {
    pointer-events: none
}

.chat-input.is-locked .btn-icon {
    opacity: var(--disabled-opacity)
}

.chat-input.is-shrinking:not(.backwards) .chat-input-secondary-button {
    opacity: 1;
    visibility: visible
}

.chat-input.is-shrinking:not(.backwards) .rows-wrapper {
    width: calc(100% - (var(--chat-input-size) * 2 + 1rem))
}

.chat-input.is-shrinking.animating .chat-input-secondary-button {
    transition: visibility 0s .1s, opacity .1s 0s
}

.chat-input.is-shrinking.animating .rows-wrapper {
    transition: width .2s
}

.chat-input.is-shrinking.animating:not(.backwards) .chat-input-secondary-button {
    transition: visibility 0s .1s, opacity .1s .1s
}

.chat-input.is-recording:not(.backwards) .btn-send, .chat-input.is-recording:not(.backwards) .btn-record-cancel {
    pointer-events: all
}

.chat-input.is-recording:not(.backwards) .record-ripple {
    visibility: visible
}

.chat-input.is-recording:not(.backwards) .attach-file {
    display: none
}

.chat-input.is-recording:not(.backwards) .record-time {
    display: block
}

.chat-input.is-recording.animating .record-ripple {
    transition: transform .03s ease-in-out, visibility .1s
}

.chat-input.is-recording.animating:not(.backwards) .record-ripple {
    transition: transform .03s, visibility 0s
}

.chat-input .new-message-wrapper {
    opacity: 1
}

.chat-input .reply-in-topic-overlay {
    background-color: inherit;
    border-radius: inherit;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text-color);
    pointer-events: none;
    padding: 0 1rem
}

.chat-input-main {
    --translateY: 0;
    --padding-bottom: .5rem;
    --bottom: var(--padding-bottom);
    padding-top: .25rem;
    transition: transform var(--transition-standard-out);
    transform: translate3d(0, var(--translateY), 0);
    z-index: 2
}

.chat-input-main-container {
    padding-bottom: var(--bottom)
}

.chat-input-main-container.is-centering .new-message-wrapper {
    pointer-events: none
}

.chat-input-main-container.is-centering:not(.backwards) .new-message-wrapper {
    opacity: 0
}

.chat-input-main-container.is-centering:not(.backwards) .rows-wrapper {
    max-height: var(--chat-input-size);
    border-bottom-right-radius: 12px
}

.chat-input-main-container.is-centering:not(.backwards) .rows-wrapper .bubble-tail {
    transform: scaleX(-1) translate(1.125rem);
    opacity: 0
}

.chat-input-main-container.is-centering:not(.backwards) .reply-wrapper {
    height: 0 !important;
    opacity: 0;
    pointer-events: none
}

.chat-input-main-container.is-centering:not(.backwards) .btn-send {
    transform: scale(0)
}

.chat-input-main-container.is-centering.animating .rows-wrapper {
    transition: transform .2s, max-height .2s, border-radius .1s
}

.chat-input-main-container.is-centering.animating .rows-wrapper .bubble-tail {
    transition: transform .1s, opacity 25ms 0s
}

.chat-input-main-container.is-centering.animating .selection-wrapper {
    transition: opacity .1s 75ms
}

.chat-input-main-container.is-centering.animating .btn-send {
    transition: .2s transform
}

.chat-input-main-container.is-centering.animating:not(.backwards) .rows-wrapper .bubble-tail {
    transition: transform .1s, opacity 25ms 75ms
}

body.animation-level-0 .chat-input-main {
    transition: none !important
}

@media only screen and (min-height: 570px) and (min-width: 601px) {
    .chat-input-main {
        max-width: var(--messages-container-width) !important
    }
}

@media only screen and (min-width: 601px) {
    .chat-input-main {
        --padding-bottom: 1.25rem
    }
}

@media only screen and (max-height: 569px) {
    .chat-input-main {
        --padding-bottom: .5rem
    }
}

@media only screen and (min-width: 1276px) {
    .chat-input-main {
        width: calc(100% - var(--right-column-width)) !important
    }

    body.is-right-column-shown .chat-input-main {
        transition: transform var(--transition-standard-in);
        transform: translate3d(calc(var(--right-column-width) / -2 * var(--reflect)), var(--translateY), 0) !important
    }
}

.chat-input-main.is-hidden {
    --translateY: 100%;
    transition: transform var(--transition-standard-in);
    transform: translate3d(0, var(--translateY), 0) !important;
    position: absolute !important;
    bottom: 0
}

.bubbles.is-selecting:not(.backwards) ~ .chat-input-main.is-hidden {
    --translateY: 0
}

.bubbles.is-selecting:not(.backwards) ~ .chat-input-main .selection-wrapper {
    opacity: 1
}

.bubbles.is-selecting.animating ~ .chat-input-main .new-message-wrapper {
    transition: opacity .1s 0s
}

.bubbles.is-selecting.animating ~ .chat-input-main .selection-container-left, .bubbles.is-selecting.animating ~ .chat-input-main .selection-container-right {
    transition: transform .2s
}

.bubbles.is-selecting.animating.backwards ~ .chat-input-main .new-message-wrapper {
    transition: opacity .1s .1s
}

.bubbles.is-selecting.animating.backwards ~ .chat-input-main .selection-wrapper {
    transition: opacity .1s 0s
}

@keyframes recordBlink {
    0% {
        opacity: 1
    }
    50% {
        opacity: .2
    }
    to {
        opacity: 1
    }
}

#column-center {
    width: 100%;
    position: relative;
    flex: 3
}

@media only screen and (max-width: 600px) {
    body.is-left-column-shown #column-center {
        transform: translate3d(100vw, 0, 0)
    }

    body.is-right-column-shown #column-center {
        transform: translate3d(-25vw, 0, 0);
        filter: brightness(80%)
    }
}

@media only screen and (min-width: 601px) and (max-width: 925px) {
    #column-center {
        position: fixed !important;
        inset: 0;
        transform: translateZ(0)
    }

    body.animation-level-2 #column-center {
        transition: transform var(--layer-transition)
    }

    body.is-left-column-shown #column-center {
        transform: translate3d(26.5625rem, 0, 0)
    }

    body.is-left-column-shown #column-center .sidebar-close-button:before {
        transform: rotate(180deg)
    }
}

.chats-container {
    height: 100%
}

.chat {
    display: flex !important;
    width: 100%;
    align-items: center;
    flex-direction: column;
    transition: transform var(--tabs-transition), filter var(--tabs-transition)
}

body.animation-level-0 .chat {
    transition: none !important
}

.chat:not(.active):not(:last-child) {
    filter: brightness(.8)
}

.chat:not(.active) {
    transform: translate3d(calc(min(420px, 25vw) * -1), 0, 0)
}

.chat:not(.active):last-child {
    transform: translate3d(100%, 0, 0)
}

.chat-background {
    overflow: hidden;
    background-color: #e6ebee;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

html.night .chat-background {
    background-color: var(--border-color)
}

.chat-background.no-transition:before {
    transition: none !important
}

.chat-background, .chat-background-item {
    position: absolute !important;
    inset: 0
}

.chat-background-item.is-pattern {
    background-image: none !important;
    background-size: contain;
    background-repeat: repeat-x;
    background-color: #000 !important;
    display: flex;
    align-items: center;
    justify-content: center
}

.chat-background-item.is-image {
    background-color: #000
}

body.animation-level-2 .chat-background-item {
    transition: opacity var(--transition-standard-out);
    opacity: 0
}

body.animation-level-2 .chat-background-item.is-visible:not(.backwards) {
    transition: opacity var(--transition-standard-in);
    opacity: 1
}

@media only screen and (min-width: 1276px) {
    .chat-background-item-scalable {
        transform-origin: var(--transform-origin-left-center)
    }

    body.animation-level-2 .chat-background-item-scalable {
        margin: -18.5rem 0 -22rem;
        transform: scale(1);
        transition: transform var(--transition-standard-out), opacity var(--transition-standard-out) !important
    }

    body.is-right-column-shown.resizing-left-sidebar .chat-background-item-scalable {
        --additional-chat-bg-proportion: 210px
    }

    .chat-background-item-scalable body.animation-level-2.is-right-column-shown .chat.active {
        transform: scaleX(calc(1 - var(--right-column-proportion, 0) + var(--additional-chat-bg-proportion, 0)));
        transition: transform var(--transition-standard-in), opacity var(--transition-standard-in) !important
    }
}

.chat-background-item-canvas {
    --opacity-max: 1;
    opacity: var(--opacity-max);
    position: absolute;
    width: 100%
}

.chat-background-item:not(.is-dark) .chat-background-item-pattern-canvas {
    mix-blend-mode: soft-light
}

.chat-background-item-color-canvas {
    height: 150%;
    top: -25%;
    margin: 0 !important;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center
}

.chat-background-item-image {
    --opacity-max: 1;
    opacity: var(--opacity-max);
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.chat .drops-container {
    --padding: 20px;
    --pinned-floating-height: 0px;
    top: calc(56px + var(--pinned-floating-height) + var(--padding))
}

@media only screen and (min-width: 1276px) {
    body.is-right-column-shown .chat .drops-container {
        inset-inline-end: calc(var(--right-column-width))
    }
}

@media only screen and (max-width: 600px) {
    .chat .drops-container {
        --padding: 10px
    }
}

.chat .drop {
    max-width: 696px;
    --wrapper-padding: 15px
}

.chat[data-type=chat] .bubbles.is-chat-input-hidden .bubbles-group-last .bubble.is-group-last {
    margin-bottom: 1.25rem
}

.chat.is-search-active .bubbles-inner:before {
    content: " ";
    height: 3.75rem
}

.chat.is-search-active .is-date {
    top: 3.75rem
}

.chat-input-wrapper {
    --padding-vertical: .3125rem;
    --padding-horizontal: var(--chat-input-inner-padding);
    --padding: var(--padding-vertical) var(--padding-horizontal);
    --button-size: 2.125rem;
    --button-horizontal-margin: .125rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--chat-input-size) + .5rem));
    max-width: calc(100% - (var(--chat-input-size) + .5rem));
    justify-content: center;
    border-radius: var(--chat-input-border-radius);
    min-height: var(--chat-input-size);
    max-height: 30rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 3
}

.chat-input-wrapper:before {
    content: " ";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 1px 8px 1px #0000001f;
    background-color: #fff;
    background-color: var(--surface-color);
    opacity: 1
}

.chat-input-control {
    --padding-vertical: .3125rem;
    --padding-horizontal: var(--chat-input-inner-padding);
    --padding: var(--padding-vertical) var(--padding-horizontal);
    position: absolute;
    margin: 0 auto;
    width: auto;
    height: var(--chat-input-size);
    padding: var(--padding);
    background-color: var(--surface-color);
    z-index: 3;
    visibility: hidden
}

.chat-input-control:before {
    opacity: 0
}

.chat-input-control-button {
    height: 2.5rem;
    padding: 0 .625rem;
    justify-content: center
}

@media only screen and (max-width: 600px) {
    .chat-input-control-button {
        font-size: 15px
    }
}

.chat-input-control-button:before {
    margin-inline-end: 10px
}

.selection-wrapper, .fake-selection-wrapper {
    position: absolute;
    top: 0;
    width: 28.75rem;
    max-width: calc(100% - var(--chat-input-padding) * 2)
}

.selection-wrapper, .chat-input-control {
    opacity: 0
}

.selection-wrapper {
    background-color: var(--surface-color)
}

.selection-wrapper:before {
    content: none
}

.selection-wrapper .selection-container {
    height: 100%;
    border-radius: inherit;
    padding: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.selection-wrapper .selection-container-left, .selection-wrapper .selection-container-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translate(0)
}

.selection-wrapper .selection-container-right {
    flex: 0 0 auto
}

.selection-wrapper .selection-container-count {
    color: var(--primary-text-color);
    font-weight: var(--font-weight-bold);
    flex-grow: 1;
    white-space: nowrap
}

.selection-wrapper .selection-container .btn-icon {
    margin-inline: 6px 5px;
    height: 42px;
    width: 42px;
    line-height: 42px
}

.selection-wrapper .selection-container .btn-primary {
    height: 2.5rem;
    width: auto
}

@media only screen and (max-width: 600px) {
    .selection-wrapper .selection-container .btn-primary {
        padding: 0 .5rem
    }
}

@media only screen and (max-width: 380px) {
    .selection-wrapper .selection-container .btn-primary {
        font-size: 0
    }

    .selection-wrapper .selection-container .btn-primary .button-icon {
        margin: 0
    }
}

.selection-wrapper .selection-container-forward .button-icon {
    margin-inline-end: 14px
}

.selection-wrapper .selection-container-delete {
    margin-inline: .375rem .625rem
}

.selection-wrapper .selection-container-delete .button-icon {
    margin-inline-end: 10px
}

.fake-wrapper {
    position: absolute;
    z-index: -1;
    visibility: hidden
}

.fake-rows-wrapper {
    inset-inline-start: var(--padding-horizontal);
    top: 0;
    width: calc(100% - var(--chat-input-size) - var(--padding-horizontal) * 2 - .5rem)
}

.rows-wrapper-wrapper {
    width: 100%;
    display: flex
}

.rows-wrapper-wrapper.is-centering-to-control:not(.backwards) .rows-wrapper:before {
    opacity: 0
}

.rows-wrapper-wrapper.is-centering-to-control:not(.backwards) ~ .chat-input-control {
    opacity: 1;
    visibility: visible
}

.rows-wrapper-wrapper.is-centering-to-control:not(.backwards) ~ .chat-input-control:before {
    opacity: 1
}

.rows-wrapper-wrapper.is-centering-to-control.animating .rows-wrapper:before, .rows-wrapper-wrapper.is-centering-to-control.animating ~ .chat-input-control:before {
    transition: opacity .05s .15s
}

.rows-wrapper-wrapper.is-centering-to-control.animating ~ .chat-input-control {
    transition: opacity .1s 75ms, visibility 0s 0s
}

.rows-wrapper-wrapper.is-centering-to-control.animating.backwards .rows-wrapper:before, .rows-wrapper-wrapper.is-centering-to-control.animating.backwards ~ .chat-input-control:before {
    transition: opacity .05s 0s
}

.rows-wrapper-wrapper.is-centering-to-control.animating.backwards ~ .chat-input-control {
    transition: opacity .1s 0s, visibility 0s .2s
}

@media only screen and (max-width: 600px) {
    .chat-rows-wrapper {
        --padding-vertical: 1px
    }
}

@media only screen and (max-width: 420px) {
    .chat-rows-wrapper {
        max-width: 100%
    }
}

@media only screen and (max-height: 569px) {
    .chat-rows-wrapper {
        --padding-vertical: 1px
    }
}

.rows-wrapper {
    transform: translate(0) scaleX(1);
    border-end-end-radius: 0
}

.rows-wrapper .bubble-tail {
    opacity: 1
}

.rows-wrapper .bubble-tail {
    position: absolute;
    bottom: -1px;
    inset-inline-end: -8.4px;
    width: 11px;
    height: 20px;
    fill: var(--surface-color);
    transform: scaleX(calc(var(--reflect) * -1))
}

.rows-wrapper .attach-file.menu-open {
    color: var(--primary-color);
    background-color: var(--light-primary-color) !important
}

.rows-wrapper .attach-file.btn-disabled {
    opacity: var(--disabled-opacity)
}

.rows-wrapper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    background-color: var(--surface-color);
    border-radius: var(--chat-input-border-radius);
    padding: var(--padding)
}

.rows-wrapper .reply-wrapper {
    justify-content: flex-start;
    height: 0;
    width: 100%;
    padding: .5625rem var(--padding-horizontal) 0;
    margin-bottom: -.5625rem;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2;
    opacity: 0;
    pointer-events: none
}

body.animation-level-2 .rows-wrapper .reply-wrapper {
    transition: height .15s ease-out, opacity .15s ease-out
}

@media only screen and (max-height: 569px), only screen and (max-width: 600px) {
    .rows-wrapper .reply-wrapper {
        padding-top: .3125rem;
        margin-bottom: -.3125rem
    }
}

.chat.is-helper-active .rows-wrapper .reply-wrapper {
    pointer-events: unset;
    height: 45px;
    opacity: 1
}

.rows-wrapper .reply-wrapper .reply {
    order: 1;
    flex: 1 1 auto;
    margin-inline: .625rem
}

.rows-wrapper .reply-wrapper .reply-icon, .rows-wrapper .reply-wrapper .reply-cancel {
    color: rgb(var(--peer-color-rgb, var(--primary-color-rgb)))
}

html.no-touch .rows-wrapper .reply-wrapper .reply-cancel:hover, html.no-touch .rows-wrapper .reply-wrapper .reply-cancel:active {
    background-color: rgba(var(--peer-color-rgb, var(--primary-color-rgb)), .08)
}

.rows-wrapper .reply-wrapper .reply-icon {
    order: 0;
    pointer-events: none
}

.rows-wrapper .reply-wrapper .reply-cancel {
    order: 2
}

.rows-wrapper .reply-wrapper .reply-subtitle {
    color: var(--secondary-text-color) !important;
    height: 1.125rem
}

.rows-wrapper .reply-wrapper .reply .peer-title {
    font-weight: 400
}

.rows-wrapper .reply-wrapper .btn-menu {
    top: auto;
    bottom: calc(100% + .5rem);
    inset-inline-start: 3.125rem;
    transform: scale(1) !important
}

.rows-wrapper .reply-wrapper .btn-menu-item {
    padding-inline-end: 1.5rem
}

.rows-wrapper .reply-wrapper .btn-menu-item-text {
    order: 1
}

.rows-wrapper .reply-wrapper .btn-menu-item .checkbox-field {
    --size: 1.25rem;
    order: 0;
    margin: 0;
    margin-inline-end: var(--icon-margin)
}

.rows-wrapper .reply-wrapper .btn-menu-item .checkbox-box-border, .rows-wrapper .reply-wrapper .btn-menu-item .checkbox-box-background {
    display: none
}

.rows-wrapper .reply-wrapper .btn-menu-item .checkbox-box-check use {
    stroke: var(--primary-text-color)
}

@media only screen and (max-width: 600px) {
    .rows-wrapper .reply-wrapper .btn-menu {
        inset-inline-start: calc(var(--padding-horizontal) * -1)
    }
}

.rows-wrapper .input-field-placeholder {
    inset-inline-start: unset
}

.rows-wrapper .input-message-input {
    max-height: 27.5rem !important
}

@media only screen and (max-height: 30rem) {
    .rows-wrapper .input-message-input {
        max-height: max(36px, calc(100vh - 10rem))
    }
}

@media only screen and (max-width: 600px) {
    .rows-wrapper .input-message-input {
        max-height: 10rem
    }
}

.rows-wrapper .input-message-input[data-inline-placeholder]:after {
    content: attr(data-inline-placeholder);
    color: #a2acb4;
    pointer-events: none
}

.rows-wrapper .new-message-wrapper {
    --send-as-size: 1.875rem;
    --send-as-margin-left: .25rem;
    --send-as-margin-right: .375rem;
    --send-as-total-size: calc(var(--send-as-size) + var(--send-as-margin-left) + var(--send-as-margin-right));
    --commands-size: 2.375rem;
    --commands-margin-left: .25rem;
    --commands-margin-right: .375rem;
    --commands-total-size: calc(var(--commands-size) + var(--commands-margin-left) + var(--commands-margin-right));
    --offset-translateX: 0px;
    align-items: flex-end;
    min-height: var(--chat-input-size)
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands, .rows-wrapper .new-message-wrapper .new-message-send-as-container {
    position: absolute;
    flex: 0 0 auto;
    bottom: calc(var(--padding-vertical) + .4375rem);
    cursor: pointer;
    transform: scale(0);
    z-index: 2;
    opacity: 0
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands {
    width: var(--commands-size);
    height: 1.875rem;
    border-radius: 1.875rem;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    padding: 0 .6875rem;
    margin-inline-start: var(--commands-margin-left);
    cursor: pointer;
    color: #fff;
    font-weight: var(--font-weight-bold)
}

html.no-touch .rows-wrapper .new-message-wrapper .new-message-bot-commands:hover, html.no-touch .rows-wrapper .new-message-wrapper .new-message-bot-commands:active {
    background-color: var(--dark-primary-color) !important
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands .animated-menu-close-icon {
    position: relative
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands-view-icon {
    font-size: 1.25rem;
    margin-inline: -.125rem .375rem
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands:not(.is-view) .new-message-bot-commands-view-icon {
    display: none
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands-view {
    white-space: nowrap;
    overflow: hidden
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands-icon-scale {
    transform: scale(.875);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: -1px
}

.rows-wrapper .new-message-wrapper .new-message-bot-commands .animated-menu-close-icon {
    --color: #fff
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container {
    width: var(--send-as-size);
    height: var(--send-as-size);
    margin-inline-start: var(--send-as-margin-left);
    background: none !important
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu {
    max-height: 20rem;
    max-width: 20rem;
    top: auto;
    inset-inline-end: auto;
    inset-inline-start: calc(var(--padding-horizontal) * -1 - .25rem) !important;
    width: auto;
    height: auto
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu-item {
    height: 2.25rem
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu-item-header {
    height: 1.875rem
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu-item-icon {
    margin-inline-end: calc(var(--icon-margin) - .5rem)
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu-item-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1 !important;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.rows-wrapper .new-message-wrapper .new-message-send-as-container .btn-menu-item-subtitle {
    font-size: .8125rem;
    font-weight: 400
}

.rows-wrapper .new-message-wrapper .new-message-send-as-avatar {
    position: absolute;
    transform: scale(0);
    opacity: 0;
    pointer-events: none
}

.rows-wrapper .new-message-wrapper .new-message-send-as-avatar.is-visible:not(.backwards) {
    transform: scale(1);
    opacity: 1
}

.rows-wrapper .new-message-wrapper .new-message-send-as-avatar.is-visible.animating {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.rows-wrapper .new-message-wrapper .new-message-send-as-close {
    width: inherit;
    height: inherit;
    background-color: var(--primary-color);
    font-size: 1.375rem;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.rows-wrapper .new-message-wrapper .new-message-send-as-lock {
    opacity: .2;
    vertical-align: bottom;
    margin-inline-start: .25rem
}

.is-premium .rows-wrapper .new-message-wrapper .new-message-send-as-lock {
    display: none
}

.rows-wrapper .new-message-wrapper.has-offset[data-offset=as] {
    --offset-translateX: var(--send-as-total-size)
}

.rows-wrapper .new-message-wrapper.has-offset[data-offset=commands] {
    --offset-translateX: calc(var(--commands-size) + .625rem)
}

.rows-wrapper .new-message-wrapper.has-offset .toggle-emoticons, .rows-wrapper .new-message-wrapper.has-offset .input-message-container {
    transform: translate(0)
}

.rows-wrapper .new-message-wrapper.has-offset:not(.backwards) .toggle-emoticons {
    transform: translate(calc(var(--offset-translateX) * var(--reflect)))
}

.rows-wrapper .new-message-wrapper.has-offset:not(.backwards) .input-message-container {
    --translateX: var(--offset-translateX);
    margin-inline-end: var(--translateX);
    transform: translate(calc(var(--translateX) * var(--reflect)))
}

.rows-wrapper .new-message-wrapper.has-offset:not(.backwards) .new-message-send-as-container, .rows-wrapper .new-message-wrapper.has-offset:not(.backwards) .new-message-bot-commands {
    transform: scale(1);
    opacity: 1
}

.rows-wrapper .new-message-wrapper.has-offset.animating .toggle-emoticons, .rows-wrapper .new-message-wrapper.has-offset.animating .input-message-container {
    transition: transform var(--transition-standard-in)
}

.rows-wrapper .new-message-wrapper.has-offset.animating .new-message-send-as-container {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.rows-wrapper .new-message-wrapper.has-offset.animating .new-message-bot-commands {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in), width var(--transition-standard-in)
}

.rows-wrapper .new-message-wrapper .btn-menu {
    inset-block-end: calc(100% + 1.125rem)
}

@media only screen and (max-height: 569px), only screen and (max-width: 600px) {
    .rows-wrapper .new-message-wrapper .btn-menu {
        inset-block-end: calc(100% + .875rem)
    }
}

.rows-wrapper .new-message-wrapper .btn-menu.top-left {
    inset-inline-end: calc(var(--padding-horizontal) * -1 - .125rem)
}

.rows-wrapper .new-message-wrapper .btn-menu.top-right {
    inset-inline-start: calc(var(--padding-horizontal) * -1 - .125rem)
}

.rows-wrapper .btn-icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: var(--secondary-text-color);
    margin-block: 0 5px;
    margin-inline: var(--button-horizontal-margin);
    padding: 0;
    width: var(--button-size);
    height: var(--button-size)
}

.rows-wrapper .btn-icon.active {
    color: var(--primary-color)
}

.input-message-container {
    --imc-padding-horizontal: .5625rem;
    width: 1%;
    max-height: inherit;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    align-self: center;
    min-height: calc(var(--chat-input-size) - var(--padding-vertical) * 2);
    display: flex;
    align-items: center;
    padding: 0 var(--imc-padding-horizontal)
}

.input-message-container .scrollable {
    position: relative
}

.input-message-input {
    --custom-emoji-size: var(--messages-custom-emoji-size);
    background: none;
    width: 100%;
    padding: .5rem 0;
    overflow-y: none;
    resize: none;
    border: none;
    outline: none;
    font-size: var(--messages-text-size);
    line-height: var(--line-height)
}

.input-message-input pre {
    display: inline;
    margin: 0
}

body.animation-level-2 .input-message-input {
    transition: height .1s
}

.input-message-placeholder-stars {
    line-height: inherit;
    vertical-align: bottom;
    margin-inline-end: .125rem
}

.bubbles {
    --translateY: 0;
    width: 100%;
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    transform: translate3d(0, var(--translateY), 0);
    transition: transform var(--transition-standard-out)
}

body.animation-level-0 .bubbles {
    transition: none !important
}

.chat[data-type=chat] .bubbles.is-chat-input-hidden.is-selecting:not(.backwards) {
    transition: transform var(--transition-standard-in);
    --translateY: -78px
}

@media only screen and (max-width: 600px) {
    .chat[data-type=chat] .bubbles.is-chat-input-hidden.is-selecting:not(.backwards) {
        --translateY: -58px
    }
}

.chat[data-type=chat] .bubbles.is-chat-input-hidden.is-selecting:not(.backwards) .bubbles-inner {
    transition: transform var(--transition-standard-in);
    transform: translateY(calc(var(--translateY) * -1))
}

.bubbles > .scrollable {
    height: auto;
    display: block
}

@media only screen and (min-width: 1276px) {
    body.is-right-column-shown .bubbles {
        transition: transform var(--transition-standard-in);
        transform: translate3d(calc(var(--right-column-width) / -2 * var(--reflect)), var(--translateY), 0)
    }
}

body.animation-level-2 .bubbles.is-selecting .is-in .bubble-content-wrapper, body.animation-level-2 .bubbles.is-selecting .bubbles-group-avatar {
    transition: var(--bubble-transition-out)
}

body.animation-level-2 .bubbles.is-selecting:not(.backwards) .is-in .bubble-content-wrapper, body.animation-level-2 .bubbles.is-selecting:not(.backwards) .bubbles-group-avatar {
    transition: var(--bubble-transition-in)
}

.bubbles.is-selecting:not(.backwards) .is-in .bubble-content-wrapper {
    transform: translate(calc(2.5rem * var(--reflect))) scale(1)
}

.bubbles.is-selecting:not(.backwards) .bubbles-group-avatar {
    transform: translate3d(calc(2.5rem * var(--reflect)), 0, 0) scale3d(.76, .76, 1)
}

.bubbles:not(.scrolled-down):not(.search-results-active) + .chat-input .bubbles-go-down {
    cursor: pointer;
    opacity: 1;
    visibility: visible
}

body.animation-level-2 .bubbles:not(.scrolled-down):not(.search-results-active) + .chat-input .bubbles-go-down {
    transition: opacity var(--layer-transition), visibility 0s 0s !important
}

.bubbles:not(.scrolled-down):not(.search-results-active) + .chat-input .bubbles-go-mention {
    --translateY: calc(var(--chat-input-size) * -1 + -.625rem)
}

.bubbles:not(.scrolled-down):not(.search-results-active) + .chat-input .bubbles-go-mention.is-visible + .bubbles-go-reaction {
    --translateY: calc(var(--chat-input-size) * -2 + -.625rem * 2)
}

.bubbles .search-group.search-group-messages {
    padding: .25rem 0 .5rem
}

.bubbles-remover {
    position: absolute;
    left: 50%;
    transform: translate(-50%) !important;
    z-index: 0
}

.bubbles-remover-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.bubbles-remover:after {
    display: none
}

.bubbles-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100%;
    justify-content: flex-end;
    max-width: min(100% - var(--chat-input-padding) * 2, var(--messages-container-width) - 1.625rem);
    transition: transform var(--transition-standard-out);
    transform: translateY(0)
}

body.animation-level-0 .bubbles-inner {
    transition: none !important
}

@media only screen and (min-width: 1276px) {
    .bubbles-inner {
        width: calc(100% - var(--right-column-width) - var(--chat-input-padding) * 2)
    }
}

.bubbles-inner:after {
    content: " ";
    height: .0625rem
}

@media only screen and (max-width: 600px) {
    .bubbles-inner.is-chat .is-in .bubble {
        --max-width: calc(100% - var(--message-handhelds-margin))
    }
}

.bubbles-inner.is-chat .is-in .bubble-content-wrapper {
    margin-inline-start: 2.875rem
}

.bubbles-inner.is-broadcast .bubble {
    --max-width: 100%
}

.bubbles-inner.is-broadcast .bubble.with-beside-button {
    --max-width: calc(100% - var(--message-beside-button-margin) * -1)
}

.bubbles-inner:not(.is-broadcast) .bubble {
    --max-width: 30rem
}

.bubbles-inner.is-scrolling .is-sticky {
    opacity: .99999 !important
}

html.is-safari .bubbles-inner.is-scrolling .is-sticky {
    transform: translateY(calc(var(--translateY) * -1))
}

body.animation-level-2 html.is-safari .bubbles-inner.is-scrolling .is-sticky {
    transition: transform var(--transition-standard-in)
}

.bubbles-go-down {
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    transition: opacity var(--layer-transition), visibility 0s .2s !important
}

.bubbles-go-mention {
    --translateY: 0;
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transition: transform var(--layer-transition), opacity var(--layer-transition), visibility 0s .2s !important
}

.bubbles-go-mention.is-visible {
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: transform var(--layer-transition), opacity var(--layer-transition), visibility 0s 0s !important
}

.bubbles-go-mention.is-visible + .bubbles-go-reaction {
    --translateY: calc(var(--chat-input-size) * -1 + -.625rem * 1)
}

.chat-secondary-button {
    position: absolute;
    background-color: var(--surface-color) !important;
    border-radius: 50%;
    color: var(--secondary-text-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 8px 1px #0000001f !important
}

body.animation-level-0 .chat-secondary-button {
    transition: none !important
}

.chat-secondary-button:before {
    position: relative
}

.chat-secondary-button:after {
    content: " ";
    position: absolute;
    inset: 0;
    border-radius: inherit
}

html.no-touch .chat-secondary-button:hover:after, html.no-touch .chat-secondary-button:active:after {
    background-color: var(--light-secondary-text-color)
}

.bubbles-corner-button {
    inset-inline-end: var(--chat-input-padding);
    bottom: calc(var(--chat-input-size) + var(--bottom) + 10px);
    z-index: 2;
    overflow: visible
}

.bubbles-corner-button .badge {
    position: absolute;
    top: -.25rem;
    inset-inline-end: -.25rem
}

.bubbles-corner-button .badge.badge-primary:not(.badge-gray) {
    background-color: var(--primary-color)
}

@media only screen and (max-width: 600px) {
    .bubbles-corner-button .badge {
        top: -.75rem;
        inset-inline-end: .1875rem
    }
}

.popup.popup-delete-message .popup-header {
    margin-bottom: 1rem
}

.btn-send-effect {
    width: .875rem;
    height: .875rem
}

.btn-send-effect-container {
    position: absolute;
    width: 1.375rem;
    height: 1.375rem;
    align-self: flex-end;
    inset-inline-end: -.25rem;
    z-index: 3;
    bottom: calc(var(--bottom) + 0rem);
    background-color: var(--surface-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0
}

body.animation-level-2 .btn-send-effect-container {
    transition: opacity var(--transition-standard-in)
}

.btn-send-effect-container.is-visible {
    opacity: 1
}

body.is-calling .topbar, body.is-calling .topbar-call-container {
    transform: translateY(0)
}

body.is-calling.animation-level-2 .topbar, body.is-calling.animation-level-2 .topbar-call-container {
    transition: transform var(--transition-standard-out)
}

body.is-calling:not(.backwards) .topbar, body.is-calling:not(.backwards) .topbar-call-container {
    transform: translateY(var(--topbar-call-height))
}

body.is-calling:not(.backwards):not(.animating) {
    --topbar-floating-call-height: var(--topbar-call-height)
}

@media only screen and (min-width: 1276px) {
    body.is-right-column-shown {
        --topbar-floating-scaleX: calc(1 - var(--right-column-proportion))
    }
}

.topbar {
    --topbar-height: 3.5rem;
    --topbar-avatar-active-size: 0px;
    --topbar-close-active-size: 2.5rem;
    --topbar-avatar-close-gap: 2px;
    --pinned-container-height: 3.25rem;
    --pinned-audio-height: var(--pinned-container-height);
    --pinned-message-height: var(--pinned-container-height);
    --pinned-translation-height: 2.625rem;
    --pinned-live-height: 3.5rem;
    --pinned-floating-height: 0px;
    width: 100%;
    z-index: 2;
    min-height: var(--topbar-height) !important;
    max-height: var(--topbar-height) !important;
    margin-bottom: var(--pinned-floating-height);
    position: relative;
    cursor: pointer !important
}

.topbar:before {
    content: " ";
    position: absolute;
    height: calc(var(--topbar-height) + var(--pinned-floating-height) - var(--topbar-floating-call-height));
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 0 1px 5px -1px #00000036;
    pointer-events: none
}

.topbar:not(.is-pinned-message-floating) .chat-utils {
    position: relative;
    z-index: 1
}

@media only screen and (min-width: 601px) {
    .topbar .menu-search {
        display: none
    }

    .topbar.is-pinned-message-shown:not(.hide-pinned) .pinned-message {
        display: flex
    }
}

@media only screen and (min-width: 926px) {
    .chat:first-child .topbar:not(.show-back-button) {
        --topbar-close-active-size: 0px;
        --topbar-avatar-close-gap: 0px
    }

    .chat:first-child .topbar:not(.show-back-button) .sidebar-close-button {
        display: none
    }

    .chat:first-child .topbar:not(.show-back-button) .chat-info {
        padding-inline-start: .1875rem
    }
}

.topbar.has-avatar {
    --topbar-close-active-size: 2.5rem;
    --topbar-avatar-active-size: 2.625rem;
    --topbar-avatar-close-gap: 6px
}

@media only screen and (min-width: 1276px) {
    .topbar .pinned-container-wrapper-utils {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar .pinned-container-wrapper-utils {
        transform: translate3d(calc(var(--right-column-width) * -1 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .topbar .pinned-container-wrapper-utils {
        transition: none
    }
}

.topbar .sidebar-close-button {
    position: absolute
}

.topbar .user-title {
    font-size: 1rem;
    line-height: 1.5rem;
    max-width: calc(100% - 1.5rem);
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold)
}

.topbar .user-title .emoji-native {
    vertical-align: inherit
}

.topbar .peer-title, .topbar .info {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: var(--line-height)
}

.topbar .btn-menu-toggle .btn-menu {
    top: calc(100% + 7px);
    max-height: calc(100 * var(--vh) - 4.375rem)
}

@media only screen and (max-width: 600px) {
    .topbar .btn-menu-toggle .btn-menu {
        max-height: calc(100 * var(--vh) - 3.75rem);
        top: 29px
    }
}

@media only screen and (max-width: 600px) {
    .topbar .btn-menu-toggle {
        margin-inline-start: 0
    }
}

.topbar .chat-info {
    flex: 1 1 auto;
    overflow: hidden;
    padding-inline-start: 49px;
    height: 46px;
    padding-top: 2px;
    padding-bottom: 2px;
    max-width: calc(100% - var(--utils-width))
}

@media only screen and (max-width: 600px) {
    .topbar .chat-info {
        padding-inline-start: 52px
    }
}

@media only screen and (min-width: 1276px) {
    body.is-right-column-shown .topbar .chat-info {
        max-width: calc(100% - var(--right-column-width) - var(--utils-width))
    }
}

.topbar .chat-info-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    max-height: 3.5rem;
    flex: 1 1 auto;
    max-width: 100%;
    z-index: 1
}

.topbar .chat-utils {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

@media only screen and (min-width: 1276px) {
    .topbar .chat-utils {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar .chat-utils {
        transform: translate3d(calc(var(--right-column-width) * -1 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .topbar .chat-utils {
        transition: none
    }
}

@media only screen and (max-width: 600px) {
    .topbar .chat-utils > .btn-icon:not(.btn-menu-toggle) {
        display: none
    }
}

.topbar .chat-join {
    width: auto;
    height: 2.25rem;
    font-weight: 400;
    font-size: .875rem;
    margin-inline-end: .5rem;
    padding: 0 1.375rem
}

.topbar .chat-join:not(.hide) + .chat-mute-button {
    display: none
}

.topbar .content {
    flex: 1 1 auto;
    padding-inline-start: 1.125rem;
    max-width: 100%;
    overflow: hidden
}

.topbar .person {
    display: flex;
    align-items: center;
    height: 100%
}

.topbar .person-avatar {
    flex: 0 0 auto
}

.topbar .person .bottom {
    font-size: .875rem;
    color: var(--secondary-text-color)
}

.topbar .person .bottom .online {
    color: var(--primary-color)
}

.topbar.hide-pinned {
    --pinned-floating-height: 0px !important
}

.topbar.hide-pinned.search-top-active {
    --pinned-floating-height: 3rem !important
}

.topbar.hide-pinned .pinned-container {
    display: none
}

.topbar.hide-pinned + .bubbles .bubbles-inner {
    margin-bottom: .25rem
}

.topbar .selector-user {
    color: var(--secondary-text-color);
    font-weight: var(--font-weight-bold)
}

@media only screen and (max-width: 600px) {
    .topbar .selector-user {
        max-width: 9rem
    }
}

.chat:not([data-type=chat]) .topbar .content {
    padding-inline-start: 16px
}

.topbar-call-container {
    height: var(--topbar-call-height) !important;
    min-height: auto !important;
    position: absolute;
    top: calc(var(--topbar-call-height) * -1);
    inset-inline: 1px 0;
    color: #fff;
    z-index: 2;
    cursor: pointer !important
}

body:not(.has-chat) .topbar-call-container {
    background: none !important
}

@media only screen and (max-width: 925px) {
    .topbar-call-container {
        inset-inline-start: 0
    }
}

.topbar-call-container .btn-icon {
    color: inherit;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    flex: 0 0 auto
}

.topbar-call-container .peer-title {
    font-weight: var(--font-weight-bold);
    white-space: nowrap
}

@media only screen and (max-width: 480px) {
    .topbar-call-container.is-group-call .topbar-call-left, .topbar-call-container.is-group-call .topbar-call-right {
        width: auto
    }

    .topbar-call-container.is-group-call .group-call-description {
        display: none
    }
}

@media only screen and (max-width: 480px) {
    .topbar-call-container.is-call .topbar-call-left, .topbar-call-container.is-call .topbar-call-right {
        width: 6.25rem
    }

    .topbar-call-container.is-call .call-description:not(.has-duration) {
        display: none
    }
}

.topbar-call-container.is-rtmp {
    font-size: var(--font-size-14)
}

.topbar-call-container.is-rtmp .topbar-call-left {
    font-weight: var(--font-weight-bold)
}

.topbar-call-container.is-rtmp .rtmp-description {
    margin-inline-start: .5rem;
    opacity: .6
}

.topbar-call-left, .topbar-call-right {
    flex: 0 0 auto;
    width: 12rem
}

.topbar-call-left {
    display: flex;
    align-items: center
}

.topbar-call-left .btn-icon {
    margin-inline-end: .375rem
}

.topbar-call-left .call-description {
    white-space: nowrap
}

.topbar-call-left .call-description-duration {
    font-weight: var(--font-weight-bold)
}

.topbar-call-center {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media only screen and (min-width: 1276px) {
    .topbar-call-center {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar-call-center {
        transform: translate3d(calc(var(--right-column-width) * 1 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .topbar-call-center {
        transition: none
    }
}

@media only screen and (min-width: 1276px) {
    .topbar-call-center {
        padding: 0 calc(var(--right-column-width) / 2)
    }
}

.topbar-call-right {
    display: flex;
    justify-content: flex-end
}

@media only screen and (min-width: 1276px) {
    .topbar-call-right {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar-call-right {
        transform: translate3d(calc(var(--right-column-width) * -1 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .topbar-call-right {
        transition: none
    }
}

.topbar-call-weave {
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1.125rem;
    left: 0;
    z-index: -1;
    transform: scale(var(--topbar-floating-scaleX), -1);
    transform-origin: var(--transform-origin-left-center);
    pointer-events: none
}

@media only screen and (min-width: 1276px) {
    .topbar-call-weave {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar-call-weave {
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .topbar-call-weave {
        transition: none
    }
}

.topbar-call-weave-canvas {
    width: 100%;
    height: 100%
}

.topbar .back-unread-badge {
    position: absolute;
    top: -.25rem;
    inset-inline-end: -.5rem
}

@media only screen and (min-width: 601px) {
    .topbar .back-unread-badge {
        display: none
    }
}

@keyframes bubbleSelected {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.bubbles-date-group {
    position: relative
}

.bubbles-date-group .sticky_sentinel--top {
    height: .1875rem;
    top: 0
}

.bubbles-group {
    position: relative
}

.bubbles-group-avatar {
    position: sticky !important;
    top: 0;
    bottom: .1875rem;
    cursor: pointer;
    pointer-events: all;
    overflow: hidden
}

.bubbles.is-selecting .bubbles-group-avatar {
    transform: translateZ(0) scaleZ(1);
    transform-origin: bottom
}

.bubbles-group-avatar.is-gesturing-reply {
    transform: translate(0)
}

.bubbles-group-avatar.is-gesturing-reply.animating.backwards {
    transition: transform var(--transition-standard-out)
}

.bubbles-group-avatar-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column-reverse;
    z-index: 2;
    pointer-events: none
}

.bubble {
    --line-height: var(--messages-line-height);
    --primary-color: var(--message-primary-color);
    --primary-color-rgb: var(--message-primary-color-rgb);
    --secondary-text-color: var(--message-status-color);
    --peer-color-rgb: var(--message-primary-color-rgb);
    --peer-border-background: rgb(var(--peer-color-rgb));
    --max-width: 100%;
    position: relative;
    z-index: 1;
    margin: 0 auto .125rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    flex-wrap: wrap
}

.bubble.is-sponsored {
    --max-width: calc(80% - var(--message-beside-button-margin) * -1) !important;
    width: 100%;
    order: 999999;
    margin-bottom: 0
}

.bubble.is-sponsored .bubble-content-wrapper {
    width: 100%
}

.bubble.is-sponsored .bubble-content {
    min-width: min(100%, 15rem) !important
}

@media only screen and (min-width: 601px) {
    .bubble:not(.service) {
        --max-width: 85%
    }
}

@media only screen and (max-width: 600px) {
    .bubble {
        --max-width: calc(100% - var(--message-handhelds-margin)) !important
    }
}

.bubble.is-gesturing-reply {
    transform: translate(0)
}

.bubble.is-gesturing-reply.animating.backwards {
    transition: transform var(--transition-standard-out)
}

.bubble.is-gesturing-reply .bubble-gesture-reply-icon {
    width: var(--message-beside-button-size);
    height: var(--message-beside-button-size);
    position: absolute;
    top: 50%;
    right: var(--message-beside-button-margin);
    transform: translateY(-50%);
    color: #fff;
    border-radius: 50%;
    background-color: var(--message-highlighting-color);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) scale(.6);
    visibility: hidden;
    font-size: 1.125rem !important
}

body.animation-level-2 .bubble.is-gesturing-reply .bubble-gesture-reply-icon {
    transition: transform .1s ease-in-out
}

.bubble.is-gesturing-reply .bubble-gesture-reply-icon.is-visible {
    visibility: visible;
    transform: translateY(-50%) scale(1)
}

.bubble.is-highlighted:after, .bubble.is-selected:after, .bubble:after {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -.0625rem;
    bottom: -.0625rem;
    content: " ";
    z-index: -1
}

.bubble.is-highlighted:after {
    background-color: var(--message-highlighting-color)
}

body:not(.animation-level-0) .bubble.is-highlighted:after {
    animation: bubbleSelected 2s linear
}

@media only screen and (max-width: 600px) {
    .bubble.is-first-unread {
        max-width: unset
    }
}

.bubble.is-first-unread:before {
    content: var(--unread-messages-text);
    height: 30px;
    margin-bottom: .1875rem;
    margin-left: -50%;
    margin-right: -50%;
    width: 200vw;
    text-align: center;
    color: var(--primary-color);
    line-height: 2.1;
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    background-color: var(--surface-color);
    z-index: 2;
    position: relative
}

.bubble.is-first-unread.is-highlighted:after, .bubble.is-first-unread.is-selected:after {
    top: calc(.0625rem + 30px)
}

.bubble.is-selected:after {
    background-color: var(--message-highlighting-color)
}

body:not(.animation-level-0) .bubble.is-selected:after {
    animation: fade-in-opacity .2s linear forwards
}

body:not(.animation-level-0) .bubble.is-selected.backwards:after {
    animation: fade-in-backwards-opacity .2s linear forwards
}

.bubble:after, .bubble:before {
    width: 100vw;
    display: block
}

.bubble.is-multiple-documents:before, .bubble.is-multiple-documents:after {
    display: none
}

.bubble.is-multiple-documents .user-avatar {
    z-index: 2
}

.bubble .replies-footer + .poll-message .poll-footer-button {
    border-radius: 0 !important
}

.bubble-select-checkbox {
    z-index: 3;
    position: absolute;
    inset-inline-start: 0;
    display: flex;
    margin: 0
}

.bubble-select-checkbox .checkbox-box-border {
    border-color: var(--message-checkbox-border-color)
}

.bubble-select-checkbox .checkbox-box-background {
    background-color: var(--message-checkbox-color)
}

.bubble-select-checkbox .checkbox-box-check use {
    stroke-width: 3.5
}

.bubble > .bubble-select-checkbox {
    bottom: .3125rem
}

.bubble > .bubble-select-checkbox .checkbox-box {
    box-shadow: 0 0 3px #0006
}

.bubbles.is-selecting .bubble:not(.is-album) .audio, .bubbles.is-selecting .bubble:not(.is-album) .document, .bubbles.is-selecting .bubble:not(.is-album) .attachment, .bubbles.is-selecting .bubble:not(.is-album) poll-element {
    pointer-events: none !important
}

.bubbles.is-selecting .bubble img, .bubbles.is-selecting .bubble video, .bubbles.is-selecting .bubble a {
    pointer-events: none
}

.bubble-content {
    min-width: 56px;
    max-width: 100%;
    border-start-start-radius: var(--border-start-start-radius);
    border-start-end-radius: var(--border-start-end-radius);
    border-end-start-radius: var(--border-end-start-radius);
    border-end-end-radius: var(--border-end-end-radius);
    box-shadow: 0 1px 2px #10232f26;
    position: relative;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color:#e3fee0;
}

body.animation-level-0 .bubble-content {
    transition: none
}

html.no-touch body:not(.no-select) .bubbles:not(.is-selecting) .bubble-content, html.is-touch body:not(.no-select) .bubbles.is-selecting .bubble-content {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.bubble-content.hover-reaction-visible .bubble-beside-button {
    transform: translate(calc(1.125rem * var(--reflect)))
}

.bubble.is-out .bubble-content.hover-reaction-visible .bubble-beside-button {
    transform: translate(calc(-1.125rem * var(--reflect)))
}

.bubble.is-out .bubble-content.hover-reaction-visible .bubble-beside-button.goto-original {
    transform: translate(calc(-1.125rem * var(--reflect))) rotate(180deg)
}

.bubble-content.is-clickable {
    cursor: pointer
}

.bubble-content-background {
    background-color: inherit;
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: -1
}

.bubble-hover-reaction {
    --size: 1.875rem;
    --offset: calc(var(--size) * -.75);
    position: absolute;
    inset-inline-end: var(--offset);
    bottom: 0;
    width: var(--size);
    height: 1.625rem;
    border-radius: var(--size);
    z-index: 2;
    background-color: var(--surface-color);
    cursor: pointer;
    opacity: 0;
    transform: scale(.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--menu-box-shadow)
}

body.animation-level-2 .bubble-hover-reaction {
    transition: opacity var(--btn-corner-transition), transform var(--btn-corner-transition)
}

.bubble-hover-reaction.is-visible:not(.backwards) {
    transform: scale(1);
    opacity: 1
}

.bubble-hover-reaction-sticker {
    width: 1.125rem;
    height: 1.125rem;
    position: relative
}

.bubble.service {
    max-width: var(--messages-container-width)
}

.bubble.service .bubble-content {
    margin: 0 auto;
    max-width: 100%;
    box-shadow: none
}

.bubble.is-date {
    position: sticky;
    top: .1875rem;
    padding-bottom: .3125rem;
    z-index: 2;
    transition: opacity .3s ease;
    opacity: .99999;
    pointer-events: none;
    font-weight: var(--font-weight-bold)
}

.bubble.is-date:before, .bubble.is-date:after {
    display: none
}

body.animation-level-0 .bubble.is-date {
    transition: none
}

.bubble.is-date.is-sticky {
    opacity: .00001
}

.bubbles-inner:not(.is-scrolling) .bubble.is-date.is-sticky .bubble-content {
    cursor: default
}

.can-click-date .bubble.is-date .bubble-content {
    cursor: pointer;
    pointer-events: all
}

.bubbles:not(.has-sticky-dates) .bubble.is-date {
    visibility: hidden
}

.bubbles.has-sticky-dates .bubble.is-date.is-fake {
    display: none
}

.bubble.is-date.is-fake {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    opacity: 1 !important;
    transition: none !important;
    visibility: visible !important
}

.bubble-beside-button {
    position: absolute;
    inset-inline-end: var(--message-beside-button-margin);
    bottom: 0;
    width: var(--message-beside-button-size);
    height: var(--message-beside-button-size);
    font-size: 1.5rem;
    align-items: center;
    display: flex;
    justify-content: center;
    color: var(--badge-text-color);
    border-radius: 50%;
    background: var(--message-highlighting-color);
    cursor: pointer;
    transform: translate(0)
}

.bubble-beside-button-top {
    inset-block: .375rem auto
}

html.no-touch .bubble-beside-button.with-hover {
    opacity: 0
}

html.no-touch body.animation-level-2 .bubble-beside-button {
    transition: opacity .2s ease-in-out, transform .2s ease-in-out
}

.bubble-beside-button--transcribe {
    font-size: 1.375rem
}

.bubble-beside-button--lifted {
    bottom: calc(var(--message-beside-button-size) + .25rem)
}

.bubble-view-button {
    --ripple-color: rgba(var(--peer-color-rgb), .1);
    border-radius: 6px;
    color: rgb(var(--peer-color-rgb));
    height: 2.5rem;
    margin: 0 .5625rem .25rem;
    width: calc(100% - 1.125rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    padding: 0 .375rem;
    background-color: rgba(var(--peer-color-rgb), .1)
}

.bubble-view-button-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

html.no-touch .bubble-view-button:hover, html.no-touch .bubble-view-button:active {
    background-color: rgba(var(--peer-color-rgb), .2)
}

.message .bubble-view-button {
    margin: .375rem 0 -.375rem;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

html.no-touch .bubble:hover .bubble-beside-button, html.no-touch .bubble:active .bubble-beside-button {
    opacity: 1
}

.bubble .forward {
    font-size: 1.25rem
}

.bubble.is-group-last {
    margin-bottom: .375rem
}

.bubble.is-group-last:after {
    bottom: -.1875rem
}

.bubbles-inner.is-chat .bubble.is-group-last.is-in > .bubble-select-checkbox {
    bottom: .1875rem
}

.bubble.is-group-first:after {
    top: -.1875rem
}

.bubble:not(.forwarded):not(.must-have-name):not(.is-group-first) .name {
    display: none
}

.bubble:not(.forwarded):not(.is-group-first) .name-first-line {
    display: none
}

.bubble.photo .bubble-content, .bubble.video .bubble-content {
    width: -moz-min-content;
    width: min-content
}

.bubble.emoji-big .emoji-image {
    height: 1.125rem;
    width: 1.125rem;
    vertical-align: bottom
}

.bubble .thumbnail {
    position: absolute
}

.bubble .canvas-thumbnail {
    border-radius: inherit
}

.bubble .canvas-dots {
    z-index: 1
}

.bubble.emoji-big {
    --emoji-size: 1rem;
    font-size: 0
}

.bubble.emoji-big .bubble-content {
    line-height: 1
}

.bubble.emoji-big .attachment {
    --custom-emoji-size: var(--emoji-size);
    border-radius: 0 !important
}

.bubble.emoji-big .attachment .emoji-image {
    width: var(--emoji-size);
    height: var(--emoji-size);
    max-width: 64px;
    max-height: 64px
}

.bubble.emoji-big .attachment .custom-emoji, .bubble.emoji-big .attachment .emoji {
    display: inline-block
}

.bubble.emoji-big:not(.sticker) .attachment {
    padding-top: .25rem;
    padding-bottom: 1.25rem;
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--emoji-size)
}

.bubble.emoji-big:not(.sticker) .attachment .emoji-native {
    height: auto;
    width: auto
}

.bubble.emoji-big:not(.sticker) .message {
    margin-top: -1.125rem
}

.bubble.emoji-big:not(.sticker) .bubble-content {
    max-width: min(420px, 100%)
}

.bubble.just-media {
    --message-time-background: var(--message-highlighting-color)
}

.bubble.just-media .bubble-content {
    background: none !important;
    box-shadow: none
}

.bubble.just-media img {
    -o-object-fit: contain;
    object-fit: contain
}

.bubble.just-media .time {
    inset-inline-end: 0
}

.bubble.sticker .bubble-content, .bubble.emoji-big:not(.sticker) .bubble-content {
    align-self: flex-start
}

.bubble.sticker .message, .bubble.emoji-big:not(.sticker) .message {
    position: relative !important;
    margin-left: auto;
    right: 0 !important
}

.bubble.sticker .attachment {
    position: absolute;
    border-radius: 0;
    z-index: 1
}

.bubble.round .attachment {
    max-width: var(--round-video-size) !important;
    max-height: var(--round-video-size) !important
}

.bubble.round .media-photo, .bubble.round .media-video {
    border-radius: 50% !important;
    pointer-events: none
}

.bubble:not(.emoji-big) .attachment {
    font-size: 0
}

.bubble .attachment {
    max-width: 100%;
    border-start-start-radius: var(--border-start-start-radius);
    border-start-end-radius: var(--border-start-end-radius);
    border-end-start-radius: var(--border-end-start-radius);
    border-end-end-radius: var(--border-end-end-radius);
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer
}

.bubble .attachment img, .bubble .attachment video {
    max-width: 100%
}

.bubble .attachment .preloader-container ~ .video-play {
    display: none
}

.bubble .attachment.no-background {
    background: none !important
}

.bubble .attachment.no-brt {
    --border-start-start-radius: 0;
    --border-start-end-radius: 0
}

.bubble .attachment.no-brb {
    --border-end-start-radius: 0;
    --border-end-end-radius: 0
}

.bubble.must-have-name .attachment {
    --border-start-start-radius: 0;
    --border-start-end-radius: 0
}

.bubble .media-container-aspecter {
    position: relative;
    margin: 0 auto;
    z-index: 1
}

.bubble .media-container-fitted {
    background-color: transparent !important
}

.bubble .media-container-fitted > .thumbnail {
    opacity: .8
}

.bubble .media-container-fitted > .thumbnail.fade-in {
    animation: thumbnail-fade-in-opacity .2s ease-in-out forwards
}

.bubble .preloader-container {
    z-index: 2
}

.bubble:not(.sticker) .attachment {
    max-width: min(420px, 100%);
    max-height: min(400px, 100%);
    width: -moz-max-content;
    width: max-content
}

.bubble img:not(.emoji), .bubble video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.is-safari .bubble img:not(.emoji), .is-safari .bubble video {
    border-radius: inherit
}

.bubble.is-album .attachment {
    max-width: min(451px, 100%);
    max-height: none
}

.bubble .album-item {
    background-color: var(--message-highlighting-color);
    max-width: 100%;
    cursor: pointer;
    position: absolute;
    overflow: hidden
}

body.animation-level-0 .bubble .album-item {
    transition: none !important
}

.bubble .album-item-media {
    border-radius: inherit
}

body.animation-level-0 .bubble .album-item-media {
    transition: none !important
}

.bubble .album-item .bubble-select-checkbox {
    bottom: auto !important;
    left: auto;
    right: .5rem;
    top: .5rem
}

.bubble .album-item.is-selected {
    border-radius: 0
}

.bubble .album-item.is-selected .album-item-media {
    transform: scale(1)
}

.bubble .album-item.is-selected.animating {
    transition: border-radius var(--transition-standard-out)
}

.bubble .album-item.is-selected.animating .album-item-media {
    transition: transform var(--transition-standard-out), border-radius var(--transition-standard-out)
}

.bubble .album-item.is-selected:not(.backwards) {
    transition: border-radius var(--transition-standard-in)
}

.bubble .album-item.is-selected:not(.backwards) .album-item-media {
    transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in);
    transform: scale(.883333)
}

.bubble .album-item.is-selected:not(.backwards), .bubble .album-item.is-selected:not(.backwards) .album-item-media {
    border-radius: 0
}

html.no-touch .bubble .anchor-url:not(.reply-markup-button):hover, html.no-touch .bubble .anchor-url:not(.reply-markup-button):active, html.no-touch .bubble .mention:hover, html.no-touch .bubble .mention:active {
    text-decoration: underline !important
}

.bubble-first {
    --border-start-start-radius: 15px;
    --border-start-end-radius: 15px;
    --border-end-end-radius: 15px;
    --border-end-start-radius: 15px;
    order: -1;
    margin-top: .5rem;
    justify-content: center;
    align-items: center;
    max-width: 100%
}

body.animation-level-0 .bubble-first {
    flex: 1 1 auto
}

.bubble-first .attachment {
    pointer-events: none
}

.bubble-first .bubble-content-wrapper {
    max-width: 100%
}

.bubble-first.empty-bubble-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

body.animation-level-2 .bubble-first.empty-bubble-placeholder .bubble-content-wrapper {
    transition: var(--bubble-transition-in)
}

.bubble-first.empty-bubble-placeholder.has-description .service-msg {
    flex-direction: column;
    align-items: flex-start !important;
    padding: .75rem 1rem .875rem !important
}

.bubble-first.empty-bubble-placeholder.has-description .center {
    align-self: center
}

.bubble-first.empty-bubble-placeholder.has-description .empty-bubble-placeholder-title {
    font-weight: var(--font-weight-bold);
    font-size: 1rem !important
}

.bubble-first.empty-bubble-placeholder.has-description .bubble-content {
    border-radius: 1.5rem !important
}

.bubble-first.empty-bubble-placeholder .empty-bubble-placeholder-line {
    color: #fff
}

.bubble-first.empty-bubble-placeholder .empty-bubble-placeholder-line + .empty-bubble-placeholder-line {
    margin-top: .5rem
}

.bubble-first.empty-bubble-placeholder .empty-bubble-placeholder-list-check {
    margin-right: .25rem;
    font-size: 1.25rem;
    vertical-align: bottom;
    margin-left: -.1875rem
}

.bubble-first.empty-bubble-placeholder .empty-bubble-placeholder-list-bullet {
    margin-right: .3125rem
}

.bubbles.has-groups .bubble-first.empty-bubble-placeholder {
    pointer-events: none
}

.bubbles.has-groups .bubble-first.empty-bubble-placeholder .bubble-content-wrapper {
    transform: translate(0) scale3d(.8, .8, 1);
    opacity: 0
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-group .empty-bubble-placeholder-list-item {
    margin-top: .4375rem !important
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-greeting.wider .service-msg {
    max-width: 272px
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-greeting .service-msg {
    max-width: 232px
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-greeting .empty-bubble-placeholder-subtitle {
    margin-top: .25rem !important
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-greeting .has-service-before {
    margin-top: .5rem;
    border-radius: .875rem !important
}

.bubble-first.empty-bubble-placeholder.empty-bubble-placeholder-greeting .has-service-before .service-msg {
    max-width: 252px !important;
    padding: .28125rem .625rem !important
}

.bubble-first.empty-bubble-placeholder-premiumRequired .service-msg, .bubble-first.empty-bubble-placeholder-paidMessages .service-msg {
    max-width: 200px
}

.bubble-first.empty-bubble-placeholder-premiumRequired .empty-bubble-placeholder-sticker, .bubble-first.empty-bubble-placeholder-paidMessages .empty-bubble-placeholder-sticker {
    width: 8rem !important;
    height: 8rem !important;
    margin-left: auto;
    margin-right: auto;
    font-size: 128px;
    border-radius: 50%;
    background-color: rgba(var(--message-highlighting-color-rgb), .8)
}

.bubble-first.empty-bubble-placeholder-premiumRequired .bubble-service-button, .bubble-first.empty-bubble-placeholder-paidMessages .bubble-service-button {
    margin: 0 auto
}

.bubble-first.empty-bubble-placeholder-premiumRequired .empty-bubble-placeholder-stars, .bubble-first.empty-bubble-placeholder-paidMessages .empty-bubble-placeholder-stars {
    display: inline-flex;
    align-items: center;
    vertical-align: -.2em;
    font-weight: 600;
    height: 1em
}

.bubble-first.empty-bubble-placeholder-premiumRequired .empty-bubble-placeholder-star-icon, .bubble-first.empty-bubble-placeholder-paidMessages .empty-bubble-placeholder-star-icon {
    font-size: 16px
}

.bubble-first.empty-bubble-placeholder .empty-bubble-placeholder-sticker {
    margin-top: .75rem !important;
    margin-inline: auto;
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer
}

.bubble-first .time {
    display: none !important
}

.bubble-first:before, .bubble-first:after {
    display: none
}

.bubble .document-name {
    font-size: var(--messages-text-size)
}

.bubble .document-size {
    font-size: var(--messages-secondary-text-size)
}

.bubble.is-square-photo .bubble-content {
    width: -moz-fit-content;
    width: fit-content
}

.bubble .reply.is-expired-story .reply-subtitle {
    color: var(--primary-color)
}

.bubble .reply {
    --font-size: var(--messages-secondary-text-size);
    margin: 0 8px .5rem
}

.bubble .reply.mb-shorter {
    margin-bottom: -.125rem
}

.bubble.just-media .floating-part {
    --primary-color: #fff;
    --primary-color-rgb: 255, 255, 255;
    --ripple-color: rgba(var(--primary-color-rgb), .1);
    border-radius: .25rem;
    position: absolute;
    top: 0;
    margin: 0;
    background-color: var(--message-highlighting-color);
    white-space: nowrap;
    max-width: 15rem
}

@media only screen and (max-width: 600px) {
    .bubble.just-media .floating-part {
        max-width: calc(100vw - 1rem - 10px - 100%)
    }
}

.bubble.just-media .name {
    color: #fff !important;
    padding: .375rem .625rem;
    line-height: var(--line-height)
}

.bubble.just-media .bubble-name-rank {
    display: none
}

.bubble.just-media .reply {
    width: -moz-max-content;
    width: max-content
}

.bubble.just-media .reply-content {
    margin-top: 0;
    position: relative;
    max-width: none !important
}

.bubble.just-media .reply-title, .bubble.just-media .reply-subtitle, .bubble.just-media .reply i {
    color: var(--primary-color) !important
}

.bubble.just-media .reply-subtitle {
    overflow: hidden
}

html.no-touch .bubble.just-media .reply:hover, html.no-touch .bubble.just-media .reply:active {
    background-color: var(--message-highlighting-hover-color)
}

.bubble.just-media .name-with-reply {
    border-radius: 15px;
    padding: .375rem .5rem
}

.bubble .message, .bubble .service-msg {
    --custom-emoji-size: var(--messages-custom-emoji-size)
}

.bubble .message {
    font-size: var(--messages-text-size);
    margin: 4px 8px 5px;
    max-width: 100%;
    color: var(--primary-text-color);
    line-height: var(--line-height);
    word-break: break-word;
    white-space: pre-wrap;
    position: relative
}

.bubble .message .custom-emoji {
    display: inline-flex
}

.bubble .message.mt-bigger {
    margin-top: 8px
}

.bubble .message.mt-shorter {
    margin-top: 2px
}

.bubble .message.mb-shorter {
    margin-bottom: 3px
}

.bubble .message.margin-bigger {
    margin: 8px
}

.bubble .message.is-hovering-spoiler {
    cursor: pointer
}

.bubble .next-is-message {
    margin-bottom: -4px !important
}

.bubble .audio .audio-title {
    font-weight: var(--font-weight-bold)
}

.bubble .audio .audio-ico {
    font-size: 0
}

.bubble .audio .audio-toggle .part {
    background-color: var(--message-icon-text-color)
}

.bubble.audio-message {
    --max-content-width: 335px
}

.bubble.audio-message .audio {
    width: var(--max-content-width);
    max-width: 100%
}

.bubble.voice-message {
    --max-content-width: 364px
}

.bubble.voice-message .document-message {
    max-width: -moz-fit-content;
    max-width: fit-content
}

.bubble.min-content .bubble-content {
    width: -moz-min-content;
    width: min-content
}

.bubble.audio-message .bubble-content > .name, .bubble.voice-message .bubble-content > .name, .bubble.document-message .bubble-content > .name {
    margin-bottom: -.25rem
}

.bubble.is-single-document .document, .bubble.is-single-document .audio {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.bubble.is-single-document .document-message {
    margin-top: -.125rem
}

.bubble.is-single-document .document .time-inner {
    margin-bottom: -3px
}

.bubble .message.expired-story-message .reply {
    pointer-events: none;
    margin: 4px -4px 0 !important
}

.bubble .message.expired-story-message.is-empty .reply {
    margin-top: 0 !important;
    margin-right: 2.5rem !important;
    background-color: transparent
}

.bubble .message.expired-story-message.is-empty .reply-content {
    margin-inline-start: .375rem
}

.bubble .message.expired-story-message.is-empty .time {
    height: 0
}

.bubble.contact-message, .bubble.call-message {
    --min-content-width: 200px
}

.bubble.contact-message .contact {
    display: flex;
    padding: 2px 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bubble.contact-message .contact-avatar {
    color: #fff
}

.bubble.contact-message .contact-details {
    padding-left: 12px;
    margin-top: 8px;
    display: flex;
    flex-direction: column
}

.bubble.contact-message .contact-name {
    font-size: 1rem;
    font-weight: var(--font-weight-bold)
}

.bubble.contact-message .contact-number {
    font-size: 14px;
    line-height: 1.4;
    color: var(--message-status-color)
}

.bubble.poll-message {
    --max-content-width: 400px
}

.bubble.document-message {
    --max-content-width: 325px
}

.bubble-call {
    cursor: pointer;
    padding: .125rem 0 .125rem 2.5625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bubble-call-icon {
    position: absolute;
    left: .3125rem;
    font-size: 1.5rem
}

.bubble-call-title {
    font-weight: var(--font-weight-bold)
}

.bubble-call-arrow {
    display: inline-block;
    transform: rotate(135deg);
    font-size: 1rem
}

.bubble-call-arrow-red {
    color: var(--danger-color)
}

.bubble-call-arrow-green {
    color: var(--message-out-primary-color)
}

.bubble-call-subtitle {
    font-size: var(--messages-secondary-text-size);
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    margin-top: .0625rem;
    margin-left: -.1875rem;
    line-height: var(--messages-secondary-line-height)
}

.bubble-call-subtitle.is-reason:before {
    margin-right: .0625rem
}

.bubble .document-message {
    margin-top: .4375rem
}

.bubble .document {
    --icon-margin: .75rem
}

.bubble .document-name {
    line-height: 1.4;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis
}

.bubble .document .time {
    height: 0;
    align-self: flex-start
}

.bubble.is-multiple-documents .message {
    padding: 0 8px !important;
    margin: 0 !important;
    border-radius: inherit
}

.bubble.is-multiple-documents .reply {
    margin: 0 0 .5rem !important
}

.bubble.is-multiple-documents .document-container {
    position: relative;
    border-radius: inherit;
    padding: .25rem 0
}

.bubble.is-multiple-documents .document-container .document-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -2;
    width: 200vw;
    left: -75vw
}

.bubble.is-multiple-documents .document-container.is-highlighted .document-wrapper:before, .bubble.is-multiple-documents .document-container.is-selected .document-wrapper:before {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: var(--message-background-color);
    border-radius: inherit;
    z-index: -1
}

.bubble.is-multiple-documents .document-container.is-highlighted .document-selection {
    background-color: var(--message-highlighting-color)
}

body:not(.animation-level-0) .bubble.is-multiple-documents .document-container.is-highlighted .document-selection {
    animation: bubbleSelected 2s linear
}

.bubble.is-multiple-documents .document-container.is-selected .document-selection {
    background-color: var(--message-highlighting-color)
}

body:not(.animation-level-0) .bubble.is-multiple-documents .document-container.is-selected .document-selection {
    animation: fade-in-opacity .2s linear forwards
}

body:not(.animation-level-0) .bubble.is-multiple-documents .document-container.is-selected.backwards .document-selection {
    animation: fade-in-backwards-opacity .2s linear forwards
}

.bubble.is-multiple-documents .document-container .bubble-select-checkbox {
    --margin-top: .25rem;
    --margin-left: .125rem;
    left: auto;
    top: auto;
    background: #fff;
    border-radius: 50%;
    margin-left: calc(var(--padding-left) * -1 + var(--icon-size) - var(--size) + var(--margin-left));
    margin-top: calc(var(--icon-size) - var(--size) + var(--margin-top))
}

@media only screen and (max-width: 600px) {
    .bubble.is-multiple-documents .document-container .bubble-select-checkbox {
        --size: 1.125rem
    }
}

.bubble.is-multiple-documents .document-container .bubble-select-checkbox:before {
    --inner-size: .125rem;
    content: " ";
    position: absolute;
    width: calc(var(--size) - var(--inner-size) * 2);
    height: calc(var(--size) - var(--inner-size) * 2);
    left: var(--inner-size);
    top: var(--inner-size);
    border: 2px solid var(--secondary-color);
    border-radius: inherit
}

.bubble.is-multiple-documents .document-container.is-first {
    padding-top: .5rem
}

.bubble.is-multiple-documents .document-container.is-first .document-selection {
    top: -.0625rem
}

.bubble.is-multiple-documents .document-container.is-first .document-wrapper {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit
}

.bubble.is-multiple-documents .document-container.is-last {
    padding-bottom: 5px
}

.bubble.is-multiple-documents .document-container.is-last .document, .bubble.is-multiple-documents .document-container.is-last .audio {
    margin-bottom: 3px
}

.bubble.is-multiple-documents .document-container.is-last .document-selection {
    bottom: -.0625rem
}

.bubble.is-multiple-documents .document-container.is-last .document-wrapper {
    border-end-start-radius: inherit;
    border-end-end-radius: inherit
}

.bubble.is-multiple-documents.is-group-first .document-container.is-first .document-selection {
    top: -.1875rem
}

.bubble.is-multiple-documents.is-group-last .document-container.is-last .document-selection {
    bottom: -.1875rem
}

.bubble.is-multiple-documents .document-wrapper > .name {
    margin: -.125rem 0 .25rem
}

.bubble.is-multiple-documents .time-inner {
    margin-bottom: 5px !important
}

.bubble.is-multiple-documents .reactions-tag {
    margin-bottom: .125rem !important
}

.bubble .document {
    height: 54px !important
}

.bubble .audio .time, .bubble.poll-message .time, .bubble.contact-message .time {
    position: absolute;
    right: 0;
    bottom: 0
}

.bubble .audio .time {
    bottom: -3px
}

.bubble.is-message-empty .bubble-content-wrapper {
    width: -moz-min-content;
    width: min-content
}

.bubble.is-message-empty:not(.emoji-big) .reactions-like-block {
    max-width: -moz-fit-content;
    max-width: fit-content
}

.bubble.is-message-empty .reaction-like-block {
    --chosen-background-color: var(--primary-color)
}

.bubble.is-message-empty .reaction-tag-dot {
    background-color: var(--counter-color) !important;
    opacity: .4
}

.bubble.is-message-empty .reaction-block.is-paid {
    --background-color: #fff6e3 !important
}

html.no-touch .bubble.is-message-empty .reaction-block:not(.is-chosen):hover:after, html.no-touch .bubble.is-message-empty .reaction-block:not(.is-chosen):active:after {
    background-color: #fff
}

.bubble.with-reply-markup .bubble-content {
    min-width: 100%
}

.bubble.with-replies .attachment {
    border-end-start-radius: 0;
    border-end-end-radius: 0
}

.bubble.with-beside-replies .bubble-content {
    min-height: 5.5rem
}

.bubble .colored-name {
    color: rgb(var(--peer-color-rgb)) !important
}

.bubble .colored-name .premium-icon, .bubble .colored-name .emoji-status-text-color {
    opacity: .6;
    color: inherit
}

.bubble .time {
    visibility: hidden;
    font-size: var(--messages-time-text-size);
    height: var(--messages-time-text-size);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    line-height: 1;
    vertical-align: middle;
    pointer-events: none;
    display: inline-flex;
    z-index: 1;
    cursor: pointer;
    margin-inline-start: .1875rem;
    direction: ltr;
    float: right
}

.is-rtl .bubble .time {
    float: inline-end;
    direction: inherit
}

.bubble .time-sending-status {
    order: 5;
    font-size: calc(var(--messages-text-size) + 3px);
    line-height: var(--messages-time-text-size);
    color: var(--message-status-color)
}

.bubble .time-part {
    font-size: 1.125rem;
    margin-inline-end: .375rem
}

.bubble .time-pinned {
    margin-inline-end: .125rem
}

.bubble .time-icon {
    pointer-events: none;
    height: 1.125rem
}

.bubble .time-icon-views {
    margin-inline-start: 2px
}

.bubble .time-edited {
    overflow: visible;
    font-size: inherit
}

.bubble .time-inner {
    pointer-events: all;
    position: absolute;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    padding: inherit;
    white-space: nowrap;
    height: var(--messages-time-text-size);
    visibility: visible;
    color: #707579;
    bottom: -1px
}

.bubble .time-inner1{
    color:#5ca853;
}



.bubble .time-replies {
    margin-inline-end: .375rem;
    order: -1;
    display: inline-flex
}

.bubble .time-replies-icon {
    margin-inline-start: .125rem;
    font-size: 12px;
    height: 12px
}

.bubble .time-post-author-comma {
    float: inline-end;
    direction: ltr
}

.bubble .time-effect {
    width: .75rem;
    height: .75rem;
    position: relative;
    margin-inline-end: .125rem
}

.bubble .time.is-block {
    float: none;
    display: block
}

.bubble .time.is-floating {
    margin-left: 0;
    display: flex;
    align-items: center;
    padding: 0 .3125rem !important;
    margin: 0 !important;
    white-space: nowrap;
    height: calc(var(--messages-time-text-size) + .375rem);
    max-width: inherit;
    position: absolute;
    bottom: .1875rem;
    right: .1875rem;
    z-index: 2;
    opacity: 1
}

body.animation-level-2 .bubble .time.is-floating {
    transition: opacity var(--transition-standard-in)
}

.bubble .time.is-floating .time-inner {
    color: #fff;
    margin: inherit;
    max-width: inherit;
    border-radius: .75rem;
    background-color: var(--message-time-background);
    height: inherit;
    bottom: 0 !important
}

.bubble .time.is-floating .time-sending-status {
    color: currentColor
}

.bubble .time.is-floating .time-post-author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.bubble .time + .clearfix {
    display: table
}

.bubble .clearfix {
    display: none
}

.bubble.has-webpage:not(.invert-media) .time {
    float: none
}

.bubble.with-replies:not(.sticker):not(.with-beside-replies) .time.is-floating {
    bottom: 53px
}

.bubble.sticker .time, .bubble.with-replies.round .time, .bubble.emoji-big .time {
    bottom: 0 !important;
    inset-inline-end: 0 !important
}

.bubble .video-time, .bubble .video-play {
    pointer-events: none
}

.bubble .video-time {
    --height: calc(var(--messages-time-text-size) + .375rem);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: var(--height);
    background-color: var(--message-time-background);
    padding: 0 6px;
    z-index: 2;
    font-size: var(--messages-time-text-size);
    color: #fff;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: var(--height);
    line-height: 1;
    opacity: 1
}

body.animation-level-2 .bubble .video-time {
    transition: opacity var(--transition-standard-in)
}

.bubble .video-time-icon {
    order: 1;
    padding: 0 1px 0 3px;
    font-size: calc(var(--messages-time-text-size) + 8px);
    color: #fff
}

.bubble .video-time.is-error .video-time-icon {
    font-size: calc(var(--messages-time-text-size) + 4px);
    padding: 0;
    margin-inline-start: 1px
}

.bubble .video-time.other-side {
    left: auto;
    right: 3px
}

.bubble.show-controls .video-time, .bubble.show-controls .time.is-floating {
    opacity: 0
}

.bubble .ckin__fullscreen {
    border: none !important
}

.bubble .ckin__fullscreen .media-photo {
    display: none
}

.bubble .ckin__fullscreen .media-container-aspecter {
    width: 100% !important;
    height: 100% !important
}

.bubble .video-to-viewer {
    color: #fff;
    position: absolute;
    top: .125rem;
    inset-inline-end: .125rem;
    z-index: 2;
    background-color: var(--message-time-background)
}

html.no-touch .bubble .video-to-viewer:hover, html.no-touch .bubble .video-to-viewer:active {
    background-color: #0009
}

.bubble .anchor-url {
    text-decoration: underline
}

.bubble .video-play {
    background-color: var(--message-time-background);
    color: #fff;
    text-align: center;
    font-size: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.bubble .peer-title {
    cursor: pointer;
    flex: 0 0 auto;
    max-width: 100%
}

.bubble .name {
    margin: 4px 8px 0;
    font-weight: var(--font-weight-bold) !important;
    color: rgb(var(--peer-color-rgb, var(--primary-color-rgb)));
    font-size: var(--messages-secondary-text-size);
    line-height: calc(var(--messages-secondary-text-size) + .25rem);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bubble .name .badge-fake {
    display: inline-block;
    vertical-align: text-bottom
}

.bubble-name-forwarded {
    font-weight: var(--font-weight-normal)
}

.bubble-name-forwarded .peer-title {
    font-weight: var(--font-weight-bold)
}

.bubble-name-forwarded-avatar {
    display: inline-block;
    vertical-align: bottom;
    margin-inline-end: .25rem;
    cursor: pointer
}

.bubble .title-flex {
    display: flex;
    max-width: inherit;
    overflow: inherit
}

.bubble-name-rank {
    color: #5ca853;
    font-weight: var(--font-weight-normal);
    font-size: var(--messages-time-text-size);
    padding-inline-start: .25rem;
    margin-left: auto;
    order: 999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.bubble:not(.has-webpage).photo:not(.is-reply) .bubble-content > .name, .bubble:not(.has-webpage).video:not(.is-reply) .bubble-content > .name {
    margin-bottom: 4px
}

.bubble:not(.has-webpage).photo .topic-name-button-container, .bubble:not(.has-webpage).video .topic-name-button-container {
    margin-bottom: 0
}

.bubble:not(.has-webpage):not(.is-album):not(.sticker):not(.round):not(.emoji-big) .attachment {
    background-color: #000
}

.bubble:not(.sticker):not(.emoji-big):not(.forwarded).hide-name .reply, .bubble:not(.sticker):not(.emoji-big):not(.forwarded):not(.is-group-first) .reply {
    margin-top: 8px
}

.bubble.is-outgoing .reactions {
    pointer-events: none
}

.bubble .bubble-tail {
    display: none
}

.bubble.can-have-tail.is-forced-rounded .bubble-tail, .bubble.can-have-tail.is-group-last .bubble-tail {
    position: absolute;
    bottom: 0;
    width: 11px;
    height: 20px;
    z-index: -2;
    display: block;
    fill: #ffffff;
    transform: translateY(1px) scaleX(1)
}

.bubble.can-have-tail.is-forced-rounded .bubble-tail, .bubble.can-have-tail.is-group-last .bubble-tail1{
    fill: #e3fee0;
}

.bubble.photo .attachment, .bubble.video .attachment {
    border: 1px solid var(--message-background-color)
}

.bubble__media-container {
    cursor: pointer;
    border-radius: inherit
}

.bubble audio-element, .bubble poll-element {
    white-space: normal
}

.bubble .replies {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.bubble .replies .c-ripple__circle {
    background-color: var(--light-primary-color)
}

.bubble .replies .rp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: inherit;
    cursor: pointer
}

.bubble .replies-beside {
    flex-direction: column;
    width: 36px;
    min-height: 36px;
    height: auto;
    max-height: 52px;
    bottom: 47px;
    border-radius: 2rem;
    right: -44px;
    padding: .375rem 0 .5rem
}

.bubble .replies-beside-text {
    font-size: .75rem;
    margin-top: .125rem
}

.bubble .replies-footer {
    height: 3.0625rem;
    border-top: .0625rem solid var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    color: var(--primary-color);
    min-width: 15rem
}

html.no-touch .bubble .replies-footer:hover, html.no-touch .bubble .replies-footer:active {
    background-color: var(--light-primary-color)
}

html.no-touch .bubble .replies-footer:hover ~ .bubble-tail, html.no-touch .bubble .replies-footer:active ~ .bubble-tail {
    fill: var(--light-filled-message-primary-color)
}

.bubble .replies-footer-icon {
    font-size: 1.5rem;
    line-height: 1;
    height: 1.5rem
}

.bubble .replies-footer-icon-comments {
    margin-inline: .125rem .375rem
}

.bubble .replies-footer-icon-next {
    position: absolute;
    inset-inline-end: .1875rem
}

.bubble .replies-footer-text {
    font-weight: var(--font-weight-bold);
    font-size: .9375rem;
    margin-inline-start: .5rem;
    display: flex;
    align-items: center;
    color: var(--primary-color);
    line-height: 1.125rem
}

.bubble .replies-footer-avatars {
    --margin-right: -.875rem;
    --border-size: 2px
}

.bubble .replies-footer.is-unread .replies-footer-text:after {
    content: " ";
    background-color: var(--primary-color);
    width: .5rem;
    height: .5rem;
    margin-inline-start: .75rem;
    border-radius: 50%
}

.bubble.is-thread-starter .user-avatar {
    display: none
}

.bubble.is-thread-starter.is-in .bubble-content-wrapper {
    margin-left: 0
}

.bubble .message .reaction {
    --background-color: var(--light-filled-message-primary-color)
}

.bubble .message .reaction:not(.is-chosen), .bubble .message .reaction.is-chosen.backwards {
    --counter-color: var(--message-primary-color)
}

.bubble .message .reaction:not(.is-chosen) .stacked-avatars, .bubble .message .reaction.is-chosen.backwards .stacked-avatars {
    --border-color: var(--background-color)
}

.bubble .message .reactions-tag {
    margin-bottom: .5rem
}

.bubble .message .reactions-tag .time-inner {
    margin-bottom: -.1875rem
}

.bubble .message .reactions-like-block .time {
    position: unset !important;
    right: auto !important;
    bottom: auto !important;
    order: 100;
    margin-top: .125rem
}

.bubble .monospace-text {
    cursor: pointer
}

.bubble.is-invoice .attachment {
    background-color: inherit !important
}

.bubble.with-reply-markup {
    --border-end-start-radius: 5px !important;
    --border-end-end-radius: 5px !important
}

.bubble .name-with-reply .name {
    display: block;
    padding: 0 !important;
    margin: 0
}

.bubble .name-with-reply .name:not(:last-child) .hide-ol {
    display: none
}

.bubble .name-with-reply .name:not(:last-child) .peer-title {
    font-weight: var(--font-weight-bold) !important
}

.bubble .name-with-reply .is-via {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.bubble .name-with-reply .reply {
    margin: .25rem 0 0;
    padding: 0;
    width: auto;
    height: auto;
    max-height: none
}

.bubble .topic-name-button {
    --color: var(--message-primary-color)
}

.bubble .topic-name-button.has-avatar {
    font-size: var(--messages-text-size);
    height: 1.875rem;
    padding-inline: 0 1.25rem;
    gap: .375rem
}

.bubble .topic-name-button.has-avatar .topic-name-button-arrow {
    position: absolute;
    inset-inline-end: .125rem;
    color: currentColor;
    opacity: .4;
    font-size: 1rem
}

.bubble .topic-name-button.has-avatar .topic-name-button-avatar {
    position: relative
}

.bubble .name .topic-name-button-container {
    margin: .25rem 0
}

.bubble.is-message-empty:not(.is-reply) .name .topic-name-button-container {
    margin-bottom: 0
}

.bubble:not(.is-group-first) .topic-name-button-container {
    display: none !important
}

.bubble .topic-name-button-container.floating-part {
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--messages-secondary-text-size)
}

.bubble .topic-name-button-container.floating-part .topic-name-button {
    --color: #fff;
    padding: 0
}

.bubble .topic-name-button-container.floating-part .topic-name-button:before {
    content: none
}

.bubble .topic-name-button-container.floating-part + .floating-part {
    margin-top: 1.75rem
}

.bubble .audio-transcribed-text {
    margin-bottom: .75rem;
    margin-top: .25rem
}

.bubble .audio-transcribed-text.is-error {
    color: var(--message-primary-color)
}

.bubble .audio-transcribed-text .audio-transcribing-dots {
    position: relative
}

.bubble .audio-transcribed-text .audio-transcribing-dots:before, .bubble .audio-transcribed-text .audio-transcribing-dots:after {
    content: "..."
}

.bubble .audio-transcribed-text .audio-transcribing-dots:before {
    opacity: 0
}

.bubble .audio-transcribed-text .audio-transcribing-dots:after {
    position: absolute;
    right: 0;
    left: 0;
    animation: 1.5s linear audio-dots infinite
}

.bubble .video-transcribed-text {
    margin-top: .25rem
}

.bubble.no-forwards .bubble-beside-button.forward {
    display: none
}

.bubble-service-button {
    min-height: 34px;
    font-weight: var(--font-weight-bold);
    background-color: rgba(var(--message-highlighting-color-rgb), .8);
    color: currentColor;
    padding: 0 1.25rem;
    border-radius: 34px;
    position: relative;
    margin-top: .625rem
}

.bubble-story-mention-wrapper {
    flex-direction: column;
    width: 184px;
    padding: 1.125rem 1rem .625rem !important
}

.bubble-story-mention-avatar-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    cursor: pointer
}

.bubble-story-mention-preview {
    position: absolute;
    inset: 5.5px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none
}

.bubble-story-mention-text {
    margin-top: .75rem
}

.bubble.is-giveaway .bubble-content {
    max-width: 20rem
}

.bubble-giveaway {
    text-align: center;
    padding: 0 1rem;
    max-width: 100%;
    line-height: calc(var(--font-size) + .25rem);
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 16rem;
    margin: 0 auto .5rem
}

.bubble-giveaway-results .bubble-giveaway-sticker {
    margin-top: 1rem
}

.bubble-giveaway-link {
    pointer-events: all;
    cursor: pointer
}

.bubble-giveaway-sticker {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-top: -2rem
}

.bubble-giveaway-sticker-counter {
    background-color: var(--primary-color);
    color: var(--message-icon-text-color);
    border: 2px solid var(--message-background-color);
    border-radius: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .375rem;
    position: absolute;
    bottom: 0;
    z-index: 1;
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--font-size) - 2px)
}

.bubble-giveaway-sticker-counter-stars {
    background-color: #ffbc2e
}

.bubble-giveaway-row {
    margin-top: .75rem
}

.bubble-giveaway-row-title {
    margin-bottom: .1875rem
}

.bubble-giveaway-channels {
    display: flex;
    gap: .375rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .375rem
}

.bubble-giveaway-channel {
    margin: 0 !important;
    background-color: rgba(var(--peer-color-rgb), .1) !important;
    color: rgb(var(--peer-color-rgb)) !important;
    font-weight: var(--font-weight-bold);
    max-width: 100% !important;
    pointer-events: all
}

.is-out .bubble-giveaway-channel {
    --peer-color-rgb: var(--message-out-primary-color-rgb) !important
}

html.no-touch .bubble-giveaway-channel:hover, html.no-touch .bubble-giveaway-channel:active {
    background-color: rgba(var(--peer-color-rgb), .2) !important
}

.bubble-giveaway-countries {
    margin-top: .25rem
}

.bubble-giveaway-country {
    display: inline-flex
}

.bubble-giveaway-country .emoji {
    line-height: inherit !important
}

.bubble-giveaway-and-more {
    margin-top: .375rem
}

.bubble-giveaway-results {
    max-width: 20rem
}

.bubble .verified-icon {
    width: 1.125rem;
    height: 1.125rem
}

.bubble.is-similar-channels .bubble-content-wrapper {
    padding: 0 !important
}

.bubble-similar-channels {
    height: 0;
    overflow: hidden
}

.bubble-sponsored-buttons {
    display: flex;
    flex-direction: column;
    width: 1.875rem;
    height: 4rem;
    border-radius: 15px;
    pointer-events: none;
    background-color: var(--message-highlighting-color) !important;
    padding: 2px 0;
    inset-block: 0;
    inset-inline-end: -2.375rem
}

.bubble-sponsored-buttons-delimiter {
    position: absolute;
    width: 100%;
    height: .5px;
    background-color: #fff;
    opacity: .2;
    flex: 0 0 auto;
    justify-self: center
}

.bubble-sponsored-buttons-button {
    width: 1.875rem;
    height: 1.875rem;
    color: #fff;
    font-size: 1.375rem;
    pointer-events: all
}

html.no-touch .bubble-sponsored-buttons-button:hover, html.no-touch .bubble-sponsored-buttons-button:active {
    background-color: var(--message-highlighting-hover-color) !important
}

.bubble:has(.reaction.is-paid.effect-active) {
    z-index: 3
}

.webpage {
    --secondary-color: var(--primary-color);
    --secondary-text-color: var(--primary-color);
    --link-color: var(--primary-color);
    --message-highlighting-color: rgba(var(--primary-color-rgb), .3);
    margin: .25rem 0;
    font-size: var(--messages-secondary-text-size);
    line-height: var(--messages-secondary-line-height);
    text-decoration: none !important;
    color: var(--primary-text-color);
    display: block
}

.webpage + .time {
    display: block;
    float: unset
}

.webpage .audio-transcribed-text {
    margin-bottom: 0;
    order: 4
}

.webpage .document {
    height: 3.375rem
}

.webpage .has-document {
    display: flex;
    flex-direction: column
}

.webpage.has-square-photo .webpage-preview {
    max-width: 100%;
    max-height: 100%;
    margin: 0
}

.webpage.has-square-photo .webpage-preview-resizer {
    width: 3rem;
    height: 3rem;
    float: inline-end;
    margin-inline-start: .625rem
}

.webpage.no-text {
    margin-bottom: .75rem
}

.webpage-preview {
    max-width: min(420px, 100%);
    max-height: min(380px, 100%);
    border-radius: var(--border-radius);
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    width: -moz-max-content;
    width: max-content
}

.webpage-preview img, .webpage-preview video {
    max-width: 100%
}

.webpage-preview-with-document {
    margin-bottom: 0 !important;
    min-width: 100%;
    overflow: unset
}

.webpage-preview-with-document .webpage-preview-resizer {
    order: 1
}

.webpage-preview-resizer {
    display: flex;
    margin: calc(.25rem - 1px) 0;
    cursor: pointer
}

.webpage-preview.is-round .media-photo, .webpage-preview.is-round .media-video {
    border-radius: 50%
}

.webpage-name, .webpage-footer, .webpage .anchor-url {
    color: var(--primary-color)
}

.webpage .anchor-url, .webpage .mention {
    position: relative;
    z-index: 1
}

.webpage-name {
    display: block
}

.webpage-name .anchor-url {
    text-decoration: none !important
}

.webpage-name-tip {
    background-color: rgba(var(--primary-color-rgb), .12);
    border-radius: 13px;
    height: 15px;
    margin-inline-start: .4375rem;
    padding: 1.25px 5px;
    font-size: calc(var(--messages-text-size) - 5px);
    pointer-events: all;
    cursor: pointer;
    position: relative;
    z-index: 1;
    vertical-align: top;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.webpage-text {
    word-break: break-word
}

.webpage-quote {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    display: flex
}

.webpage-content {
    flex: 1 1 auto;
    overflow: hidden;
    padding: .25rem .375rem;
    padding-inline-start: calc(.375rem + 3px)
}

.webpage-content.min-content {
    min-width: 15rem;
    width: -moz-min-content;
    width: min-content
}

.webpage-footer {
    margin-top: .375rem;
    border-top: .0625rem solid rgba(var(--primary-color-rgb, 0, 0, 0), .2);
    position: relative
}

.webpage-footer-icon {
    position: absolute;
    right: -.125rem;
    top: .125rem;
    display: block
}

.webpage-footer.is-link .webpage-footer-icon {
    transform: rotate(-45deg)
}

.webpage-footer.is-text {
    font-size: calc(var(--messages-text-size) - 4px);
    line-height: calc(var(--messages-text-size) - 1px);
    white-space: pre-wrap;
    padding: .375rem 0 .125rem;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.webpage-footer.is-button {
    margin-bottom: -.25rem;
    line-height: 2.25rem;
    font-size: var(--messages-text-size);
    text-align: center;
    font-weight: var(--font-weight-bold);
    height: 2.6875rem;
    padding: .1875rem .5rem 0;
    pointer-events: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.timestamp {
    text-decoration: underline
}

.timestamp.is-disabled {
    color: inherit;
    text-decoration: none !important;
    cursor: inherit
}

.geo-container {
    width: 23.25rem;
    height: 16.375rem
}

.geo-container.is-expired .geo-live-pin-avatar {
    opacity: .5
}

.geo-container.is-expired .geo-live-pin-heading, .geo-container.is-expired .geo-live-pin:before {
    display: none
}

@media only screen and (max-width: 600px) {
    .geo-container {
        width: 277px;
        height: 195px
    }
}

.geo-svg {
    width: 100%;
    height: 100%;
    background-color: var(--message-background-color)
}

.geo-svg-path {
    fill: var(--dark-message-background-color)
}

.geo-svg, .geo-image-container {
    pointer-events: none
}

.geo-image-container {
    position: absolute;
    inset: 0
}

.geo-live-pin {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .15));
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 1
}

.geo-live-pin-avatar {
    position: relative;
    overflow: hidden;
    margin-right: 0;
    margin-bottom: 1.3125rem
}

.geo-live-pin-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, .3125rem) rotate(var(--heading));
    transform-origin: bottom;
    width: 1.5rem;
    height: 2rem;
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: radial-gradient(circle, var(--primary-color) -100%, transparent 100%);
    border-radius: 40%
}

body.animation-level-2 .geo-live-pin-heading {
    transition: transform var(--transition-standard-in)
}

.geo-live-pin-svg {
    fill: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    width: 5rem;
    bottom: .5rem
}

.geo-live-pin:before, .geo-live-pin:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    border-radius: 50%
}

.geo-live-pin:before {
    width: var(--accuracy-size);
    height: var(--accuracy-size)
}

body.animation-level-2 .geo-live-pin:before {
    animation: accuracy-wave 5s ease-out infinite forwards
}

@keyframes accuracy-wave {
    0% {
        transform: translate(-50%, 50%) scale(0);
        background-color: var(--primary-color)
    }
    to {
        transform: translate(-50%, 50%) scale(1);
        background-color: transparent
    }
}

.geo-live-pin:after {
    border: 2px solid #fff;
    background-color: var(--primary-color);
    width: 1rem;
    height: 1rem
}

.geo-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    margin-top: -1.625rem;
    width: 2rem;
    height: 3.25rem
}

.geo-footer {
    display: flex;
    flex-direction: column;
    min-height: 2.5rem
}

.geo-footer-title {
    font-weight: var(--font-weight-bold)
}

.geo-footer-address {
    color: #5ca853;
    font-size: var(--messages-secondary-text-size);
    line-height: var(--messages-secondary-line-height)
}

.geo-footer-timer {
    position: absolute;
    top: 50%;
    right: .1875rem;
    transform: translateY(-50%);
    width: 1.875rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--message-primary-color);
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--messages-text-size) - 3px);
    white-space: nowrap
}

.geo-footer-timer-svg {
    position: absolute;
    top: 0;
    left: 0;
    fill: none
}

.geo-footer-timer-circle {
    stroke: var(--message-primary-color);
    stroke-width: 2;
    stroke-linecap: round
}

.geo-footer-timer-circle-shadow {
    opacity: .2
}

.geo-footer.is-live {
    position: relative;
    padding-right: 3rem
}

@keyframes audio-dots {
    0% {
        content: ""
    }
    33% {
        content: "."
    }
    66% {
        content: ".."
    }
    to {
        content: "..."
    }
}

.bubbles-group-last .bubble.is-group-last {
    margin-bottom: 0
}

.bubbles-group-last .bubble.is-group-last:after, .bubbles-group-last .bubble.is-group-last .document-container.is-last .document-selection {
    bottom: -.0625rem
}

.can-zoom-fade {
    transform: scale(1) translate(0);
    transform-origin: center;
    opacity: 1
}

body.animation-level-2 .can-zoom-fade {
    transition: var(--bubble-transition-in) !important
}

.can-zoom-fade.zoom-fade {
    transform: scale3d(.8, .8, 1) translate(0);
    opacity: 0
}

.bubble-content-wrapper {
    display: flex;
    flex-direction: column;
    max-width: min(var(--max-content-width, 100%), var(--max-width))
}

.bubble.service {
    align-self: center;
    justify-content: center
}

.bubble.service b {
    color: inherit
}

.bubble.service .bubble-content {
    background-color: transparent;
    border-radius: .875rem
}

.bubble.service .bubble-content-wrapper {
    max-width: 100%;
    padding: 0 2rem
}

.bubble.service .service-msg, .bubble.has-fake-service .service-msg {
    color: #fff;
    background-color: var(--message-highlighting-color);
    font-size: var(--messages-service-text-size);
    padding: .28125rem .625rem;
    line-height: calc(var(--messages-service-text-size) + 5px);
    border-radius: inherit;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: break-word
}

.bubble.service .service-msg .expired-story-icon, .bubble.has-fake-service .service-msg .expired-story-icon {
    margin-top: -4px
}

.bubble.service .service-msg i, .bubble.has-fake-service .service-msg i {
    font-style: normal
}

.bubble.service .service-msg a, .bubble.has-fake-service .service-msg a {
    color: #fff
}

.bubble.service .service-msg a, .bubble.service .service-msg .peer-title, .bubble.service .service-msg [data-saved-from], .bubble.has-fake-service .service-msg a, .bubble.has-fake-service .service-msg .peer-title, .bubble.has-fake-service .service-msg [data-saved-from] {
    cursor: pointer;
    font-weight: var(--font-weight-bold)
}

.bubble.service .service-msg a:hover, .bubble.service .service-msg .peer-title:hover, .bubble.service .service-msg [data-saved-from]:hover, .bubble.has-fake-service .service-msg a:hover, .bubble.has-fake-service .service-msg .peer-title:hover, .bubble.has-fake-service .service-msg [data-saved-from]:hover {
    text-decoration: underline
}

.bubble.service .service-msg .emoji-image, .bubble.has-fake-service .service-msg .emoji-image {
    margin-bottom: 3px
}

.bubble.has-fake-service {
    padding-top: 2.625rem;
    position: relative
}

.bubble.has-fake-service .service-msg {
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translate(-50%);
    max-width: 100%;
    border-radius: 15px;
    display: block;
    text-align: left;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.bubble.is-in {
    --border-start-start-radius: 5px;
    --border-start-end-radius: 15px;
    --border-end-end-radius: 15px;
    --border-end-start-radius: 5px
}

.bubble.is-in .bubble-content-wrapper.can-zoom-fade {
    transform-origin: var(--transform-origin-left-center)
}

.bubble.is-in.is-group-first, .bubble.is-in.is-forced-rounded {
    --border-start-start-radius: 15px
}

.bubble.is-in.is-group-last.can-have-tail, .bubble.is-in.is-forced-rounded.can-have-tail {
    --border-end-start-radius: 0 !important
}

.bubble.is-in.is-group-last.can-have-tail .bubble-tail, .bubble.is-in.is-forced-rounded.can-have-tail .bubble-tail {
    margin-inline-start: -8.4px
}

.bubble.is-in.is-group-last.can-have-tail.has-plain-media-tail .attachment, .bubble.is-in.is-forced-rounded.can-have-tail.has-plain-media-tail .attachment {
    border-end-start-radius: 15px
}

.bubble.is-in.is-group-last:not(.can-have-tail), .bubble.is-in.is-forced-rounded:not(.can-have-tail) {
    --border-end-start-radius: 15px
}

.bubble.is-in.just-media .floating-part {
    left: calc(100% + 10px)
}

@media only screen and (max-width: 600px) {
    .bubble.is-in.just-media .floating-part {
        left: calc(100% + 1px)
    }
}

.bubble.is-in .reply-title {
    color: var(--primary-color)
}

.bubble.is-in .time {
    margin-inline-start: 5px
}

.bubble.is-in .audio-subtitle, .bubble.is-in .contact-number, .bubble.is-in .audio-time {
    color: var(--secondary-text-color) !important
}

.bubble.is-in .monospace-text {
    color: rgb(var(--peer-color-rgb))
}

.bubble.is-out {
    flex-direction: row-reverse;
    --message-background-color: var(--message-out-background-color);
    --light-message-background-color: var(--light-message-out-background-color);
    --light-filled-message-background-color: var(--light-filled-message-out-background-color);
    --dark-message-background-color: var(--dark-message-out-background-color);
    --message-icon-text-color: var(--message-out-icon-text-color);
    --link-color: var(--message-out-link-color);
    --message-primary-color: var(--message-out-primary-color);
    --message-primary-color-rgb: var(--message-out-primary-color-rgb);
    --light-filled-message-primary-color: var(--light-filled-message-out-primary-color);
    --selection-background-color: var(--message-out-selection-background-color);
    --message-time-color: var(--message-out-time-color);
    --message-status-color: var(--message-out-status-color);
    --link-color: var(--message-primary-color);
    --peer-color-rgb: var(--message-primary-color-rgb);
    --peer-border-background: var(--message-out-peer-border-background);
    --message-reaction-tag-dot-color: var(--message-out-reaction-tag-dot-color);
    --border-start-start-radius: 15px;
    --border-start-end-radius: 5px;
    --border-end-end-radius: 5px;
    --border-end-start-radius: 15px
}

.bubble.is-out .bubble-content {
    margin-left: auto
}

.bubble.is-out .bubble-content, .bubble.is-out .bubble-content .poll-footer-button {
    border-start-start-radius: var(--border-start-start-radius);
    border-start-end-radius: var(--border-start-end-radius);
    border-end-end-radius: var(--border-end-end-radius);
    border-end-start-radius: var(--border-end-start-radius)
}

.bubble.is-out .bubble-content .name {
    color: var(--message-out-primary-color)
}

.bubble.is-out .bubble-content-wrapper.can-zoom-fade {
    transform-origin: var(--transform-origin-right-center)
}

@media only screen and (min-width: 1276px) {
    .bubble.is-out .bubble-content-wrapper {
        transform: translate(calc((var(--chat-input-size) + .5rem) * var(--reflect) * -1)) scale(1)
    }

    .bubble.is-out .bubble-content-wrapper.zoom-fade {
        transform: translate(calc((var(--chat-input-size) + .5rem) * var(--reflect) * -1)) scale3d(.8, .8, 1)
    }

    body.animation-level-2 .bubble.is-out .bubble-content-wrapper {
        transition: var(--bubble-transition-out)
    }

    body.is-right-column-shown .bubble.is-out .bubble-content-wrapper {
        transform: translate(0) scale(1)
    }

    body.animation-level-2 body.is-right-column-shown .bubble.is-out .bubble-content-wrapper {
        transition: var(--bubble-transition-in)
    }

    body.is-right-column-shown .bubble.is-out .bubble-content-wrapper.zoom-fade {
        transform: translate(0) scale3d(.8, .8, 1)
    }
}

.bubble.is-out.is-group-first, .bubble.is-out.is-forced-rounded {
    --border-start-end-radius: 15px
}

.bubble.is-out.is-group-last.can-have-tail, .bubble.is-out.is-forced-rounded.can-have-tail {
    --border-end-end-radius: 0 !important
}

.bubble.is-out.is-group-last.can-have-tail .bubble-tail, .bubble.is-out.is-forced-rounded.can-have-tail .bubble-tail {
    inset-inline-end: -8.4px;
    transform: translateY(1px) scaleX(calc(var(--reflect) * -1))
}

.bubble.is-out.is-group-last.can-have-tail.has-plain-media-tail .attachment, .bubble.is-out.is-forced-rounded.can-have-tail.has-plain-media-tail .attachment {
    border-end-end-radius: 15px
}

.bubble.is-out.is-group-last:not(.can-have-tail), .bubble.is-out.is-forced-rounded:not(.can-have-tail) {
    --border-end-end-radius: 15px
}

.bubble.is-out.just-media .floating-part {
    inset-inline-end: calc(100% + 10px)
}

.bubble.is-out .time-inner {
    margin-inline-end: -2px
}

.bubble.is-out.forwarded .name {
    color: var(--message-out-primary-color)
}

.bubble.is-out.is-error .time-sending-status {
    color: var(--message-error-color)
}

.bubble.is-out .document-ico:after {
    border-top-color: var(--message-background-color);
    border-right-color: var(--message-background-color)
}

.bubble.is-out.is-message-empty .reactions-like-block {
    --margin-horizontal: .25rem;
    justify-content: flex-end;
    position: relative;
    margin-top: unset
}

.bubble.is-out.is-message-empty .reactions-renderer {
    inset: 0 !important
}

.bubble.is-out.is-message-empty .reaction-like-block.is-chosen {
    --chosen-background-color: var(--surface-color);
    --counter-color: var(--primary-color)
}

.bubble.is-out.is-message-empty:not(.emoji-big) .reactions-like-block {
    margin-inline-start: auto
}

.bubble.is-out .bubble-call-arrow {
    transform: rotate(-45deg)
}

.bubble.is-out poll-element .poll-answer-selected {
    color: var(--message-out-icon-text-color)
}

html.no-touch .bubble.is-out poll-element .poll-answer:hover .animation-ring {
    background-color: var(--message-out-primary-color);
    opacity: .08
}

.bubble.is-out poll-element .poll-avatars .stacked-avatars {
    --border-color: var(--message-background-color)
}

.bubble.is-out poll-element .progress-ring__circle {
    stroke: var(--message-out-primary-color)
}

.bubble.is-out poll-element .c-ripple__circle {
    background-color: var(--message-out-primary-color)
}

.bubble.is-out poll-element .c-ripple__circle:not(.hiding) {
    opacity: .08
}

.bubble.is-out.is-sending poll-element {
    pointer-events: none
}

.bubble.is-out .audio .progress-line:before, .bubble.is-out .audio .progress-line__loaded {
    opacity: .1;
    background-color: var(--primary-color)
}

.bubble.is-out .bubble-beside-button {
    inset-inline: var(--message-beside-button-margin) auto
}

.bubble.is-out .bubble-beside-button.goto-original {
    transform: rotate(180deg)
}

.bubble.is-out.is-multiple-documents .document-container .bubble-select-checkbox {
    background-color: var(--message-background-color)
}

.bubble.is-out.is-multiple-documents .document-container .bubble-select-checkbox:before {
    border-color: var(--dark-message-background-color)
}

.bubble.is-out.is-multiple-documents .document-container .bubble-select-checkbox .checkbox-box-border {
    border-color: var(--message-background-color)
}

.bubble.is-out .bubble-hover-reaction {
    inset-inline: var(--offset) auto
}

.night .bubble.is-out .code {
    --primary-color-rgb: var(--message-out-background-color-rgb);
    --primary-color: #fff
}

.bubble.is-out .monospace-text {
    color: #5ca853
}

.reply-markup {
    width: 100%;
    margin-top: .0625rem
}

.bubble:not(.is-group-last) .reply-markup {
    margin-bottom: .125rem
}

.reply-markup-row {
    margin-top: .125rem;
    overflow: hidden;
    min-height: 2.5rem;
    display: flex;
    gap: .125rem
}

.reply-markup-button {
    padding: .5625rem 0;
    border-radius: .375rem;
    z-index: 2;
    font-size: var(--font-size-14);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: center;
    color: #fff !important;
    outline: none;
    border: none;
    width: 100%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--message-highlighting-color);
    font-weight: var(--font-weight-bold)
}

.reply-markup-button.is-first {
    border-end-start-radius: 12px
}

.reply-markup-button.is-last {
    border-end-end-radius: 12px
}

.reply-markup-button-text {
    position: relative;
    pointer-events: none
}

.reply-markup-button.anchor-url {
    text-decoration: none !important
}

.reply-markup-button-icon {
    position: absolute;
    right: .125rem;
    top: .125rem;
    display: block
}

.reply-markup-button.is-link .reply-markup-button-icon {
    transform: rotate(-45deg)
}

html.no-touch .reply-markup-button:hover, html.no-touch .reply-markup-button:active, html.no-touch .bubble-beside-button:hover, html.no-touch .bubble-beside-button:active, html.no-touch .bubble-service-button:hover, html.no-touch .bubble-service-button:active {
    background-color: var(--message-highlighting-hover-color)
}

.bubble-primary-color {
    color: var(--message-primary-color);
    font-weight: var(--font-weight-bold)
}

.transcribe-button-spinner-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.transcribe-button-spinner-svg circle {
    transform-origin: 50% 50%;
    animation: transcribe-button-spinner-animation 1s linear infinite, transcribe-button-spinner-length-animation 1.2s linear infinite alternate
}

@keyframes transcribe-button-spinner-animation {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes transcribe-button-spinner-length-animation {
    0% {
        stroke-dasharray: 0 65.97
    }
    to {
        stroke-dasharray: 32.98 32.98
    }
}

.inline-stars {
    display: inline-flex;
    align-items: center
}

.inline-stars .tgico {
    line-height: unset
}

.inline-stars--reversed {
    vertical-align: -.175em;
    flex-direction: row-reverse
}

.bubble-meta-inline-stars {
    margin-right: 6px
}

.pinned-message {
    --custom-emoji-size: calc(var(--font-size) + 2px) !important
}

.pinned-message-border {
    position: relative;
    height: 2rem;
    width: .125rem;
    flex: 0 0 auto
}

.pinned-message-border-wrapper-1 {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 2rem;
    width: .125rem;
    border-radius: 1px;
    background: var(--primary-color)
}

.pinned-message-border-mask {
    --mask-height: .375rem;
    --height: 2.5rem;
    height: var(--height);
    overflow: hidden
}

.pinned-message-border-mask:before, .pinned-message-border-mask:after {
    position: absolute;
    left: 0;
    right: 0;
    content: " ";
    display: block;
    z-index: 1;
    height: var(--mask-height);
    opacity: 0
}

body.animation-level-2 .pinned-message-border-mask:before, body.animation-level-2 .pinned-message-border-mask:after {
    transition: opacity .2s ease-in-out
}

.pinned-message-border-mask:before {
    top: 0;
    background: linear-gradient(var(--surface-color), transparent)
}

.pinned-message-border-mask:after {
    bottom: 0;
    background: linear-gradient(transparent, var(--surface-color))
}

.pinned-message-border-mask.mask-top:before, .pinned-message-border-mask.mask-bottom:after {
    opacity: 1
}

.pinned-message-border-wrapper {
    color: var(--primary-color);
    position: relative
}

.pinned-message-border-wrapper:before {
    position: absolute;
    content: " ";
    inset: 0;
    display: block;
    background: var(--primary-color);
    opacity: .4
}

.pinned-message-border-bars {
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round
}

.pinned-message-border-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    background: currentColor;
    border-radius: 1px
}

body:not(.animation-level-0) .pinned-message-border-wrapper, body:not(.animation-level-0) .pinned-message-border-mark {
    transition: transform .25s ease-in-out
}

.pinned-message-content {
    --height: 32px;
    height: var(--height)
}

.pinned-message-media {
    border-radius: .1875rem
}

.pinned-message, .reply {
    --font-size: var(--font-size-14);
    --custom-emoji-size: calc(var(--font-size) + 4px);
    --line-height: calc(var(--font-size) + 4px);
    cursor: pointer;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pinned-message-content, .reply-content {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    pointer-events: none;
    position: relative;
    margin-inline-start: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.pinned-message-title, .reply-title {
    color: var(--primary-color)
}

.pinned-message-title, .pinned-message-subtitle, .reply-title, .reply-subtitle {
    font-size: var(--font-size);
    line-height: var(--line-height);
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.pinned-message-media, .reply-media {
    height: 2rem !important;
    width: 2rem !important;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: .125rem
}

.pinned-message-media.is-round, .reply-media.is-round {
    border-radius: 50%
}

.pinned-message-media > img, .pinned-message-media > video, .reply-media > img, .reply-media > video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.pinned-message i, .reply i {
    font-style: normal;
    color: var(--secondary-text-color)
}

.pinned-message .emoji-image, .reply .emoji-image {
    height: 1rem;
    width: 1rem;
    vertical-align: top
}

.reply {
    min-height: calc(var(--font-size) * 2 + .875rem);
    display: block;
    white-space: initial;
    font-size: var(--font-size)
}

.reply-content {
    padding: 3px 0;
    padding-inline-end: .375rem;
    margin-inline-start: .5rem;
    display: block
}

.reply-media {
    border-radius: .125rem;
    position: relative;
    float: inline-start;
    margin-inline-end: .375rem;
    margin-bottom: .25rem
}

.reply-cancel {
    margin-bottom: 0 !important
}

.reply-multiline .reply-subtitle {
    white-space: unset;
    word-break: break-word;
    overflow: unset
}

.reply-background-canvas {
    position: absolute;
    top: -6px;
    bottom: -6px;
    inset-inline-end: 9px
}

.reply.quote-like-icon .reply-title {
    padding-inline-end: .875rem
}

.reply .peer-title {
    font-weight: var(--font-weight-bold)
}

.reply-title-icon.with-margin {
    margin-inline-end: .125rem
}

.pinned-container {
    --container-height: var(--pinned-container-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    overflow: visible;
    cursor: pointer
}

.pinned-container.is-floating {
    position: absolute !important;
    top: var(--topbar-height);
    right: 0;
    left: 0;
    margin: 0;
    width: auto;
    height: var(--container-height);
    max-height: var(--container-height);
    background-color: var(--surface-color) !important
}

.pinned-container.is-floating .pinned-container-wrapper {
    order: 0;
    padding: 0 1rem;
    height: 100%;
    border-radius: 0;
    z-index: 0;
    max-width: 100%
}

@media only screen and (max-width: 600px) {
    .pinned-container.is-floating .pinned-container-wrapper {
        padding: 0 .5rem
    }
}

.pinned-container.is-floating .pinned-container-content {
    margin-inline-end: .5rem
}

@media only screen and (min-width: 1276px) {
    body.is-right-column-shown .pinned-container.is-floating .pinned-container-content {
        padding-right: var(--right-column-width)
    }
}

.pinned-container.is-floating:before {
    content: " ";
    border-top: 1px solid var(--border-color);
    position: absolute;
    inset: 0;
    pointer-events: none
}

.pinned-container-content {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    pointer-events: none
}

.pinned-container .btn-icon {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    flex: 0 0 auto
}

.pinned-container-wrapper {
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
    align-items: center;
    padding: .25rem;
    border-radius: .25rem;
    order: 1
}

.pinned-container-wrapper-utils {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    position: relative
}

.pinned-message {
    display: flex;
    width: auto
}

.pinned-message-content {
    overflow: visible !important
}

.pinned-message-media-container {
    width: 2rem;
    height: 2rem;
    position: absolute;
    margin-inline-start: -.25rem
}

body.animation-level-2 .pinned-message-media-container {
    transition: transform var(--pm-transition)
}

.pinned-message-title, .pinned-message-subtitle {
    transform: translate(0)
}

.pinned-message.is-media .pinned-message-title, .pinned-message.is-media .pinned-message-subtitle {
    transform: translate(calc(2.25rem * var(--reflect)))
}

.pinned-message:not(.is-media) .pinned-message-media-container {
    transform: scale(0)
}

.pinned-message .pinned-container-wrapper {
    min-width: 16rem
}

.pinned-message:not(.is-floating) {
    margin-inline-end: 1rem
}

.pinned-message:not(.is-floating) .pinned-container-wrapper-utils {
    display: none
}

.pinned-message:not(.is-floating) > .pinned-message-close {
    display: flex;
    margin-inline-end: .75rem;
    order: 0
}

.pinned-message.is-media .pinned-message-title, .pinned-message.is-media .pinned-message-subtitle {
    width: calc(100% - 2.25rem)
}

.pinned-message.is-floating {
    --container-height: var(--pinned-message-height)
}

.pinned-message.is-floating > .btn-icon {
    display: none
}

.pinned-message.is-floating .pinned-container-wrapper {
    padding-inline-start: 1rem
}

.pinned-message.is-floating .pinned-container-content {
    margin-inline-end: 0
}

.pinned-message-content .pinned-message-title, .pinned-message-content .pinned-message-subtitle {
    position: relative;
    height: calc(var(--height) / 2);
    min-height: calc(var(--height) / 2);
    overflow: visible
}

body.animation-level-2 .pinned-message-content .pinned-message-title, body.animation-level-2 .pinned-message-content .pinned-message-subtitle {
    transition: transform var(--pm-transition)
}

.pinned-message-title {
    margin-bottom: .25rem
}

.pinned-message-subtitle .animated-super-row {
    font-size: var(--font-size-14);
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.pinned-message .animated-counter {
    transition: transform var(--pm-transition), opacity var(--pm-transition)
}

body.animation-level-0 .pinned-message .animated-counter {
    transition: none
}

.pinned-message .animated-counter:before {
    content: "#"
}

.pinned-message .animated-counter.is-last:not(.backwards) {
    transform: scale(.68);
    opacity: 0
}

.pinned-message .animated-super-row {
    --translateY: 16px
}

.pinned-message .pinned-message-media {
    --translateY: 32px
}

.pinned-message.hide ~ .chat-pinlist, .pinned-message:not(.is-many) ~ .chat-pinlist {
    display: none
}

.pinned-message.is-many .pinned-message-close {
    display: none
}

.pinned-message.is-many:not(.is-floating) .pinned-message-pinlist {
    display: none
}

.pinned-message.is-many.is-floating .pinned-message-close {
    display: none
}

.pinned-message:not(.is-many) .pinned-message-pinlist {
    display: none
}

.pinned-message-pinlist {
    order: 2
}

.chat[data-type=discussion] .pinned-message .pinned-container-close {
    display: none !important
}

.pinned-audio {
    --progress-height: .25rem
}

.pinned-audio.is-floating {
    --container-height: var(--pinned-audio-height)
}

.pinned-audio:not(.is-floating) {
    padding-inline-end: 1.75rem;
    max-width: 210px;
    position: relative
}

.pinned-audio .pinned-container-wrapper {
    overflow: visible !important;
    z-index: 1 !important
}

.pinned-audio .pinned-container-wrapper > .btn-icon {
    margin-inline-start: 0 !important
}

.pinned-audio-title {
    font-weight: var(--font-weight-bold)
}

.pinned-audio-subtitle {
    color: var(--secondary-text-color)
}

.pinned-audio-title, .pinned-audio-subtitle {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.pinned-audio-content {
    margin-inline-start: .75rem
}

.pinned-audio-progress {
    --border-radius: 0;
    --height: var(--progress-height);
    --translateY: .125rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scaleX(var(--topbar-floating-scaleX)) translateY(var(--translateY));
    transform-origin: var(--transform-origin-left-center)
}

@media only screen and (min-width: 1276px) {
    .pinned-audio-progress {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-audio-progress {
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-audio-progress {
        transition: none
    }
}

body.animation-level-2 .pinned-audio-progress:before {
    transition: opacity .2s ease-in-out
}

.pinned-audio-progress:not(:hover):before {
    opacity: 0
}

html.no-touch .pinned-audio-progress:hover, html.no-touch .pinned-audio-progress:active {
    --translateY: 0
}

.pinned-audio-progress .progress-line__filled:after {
    display: none !important
}

.pinned-audio-progress .progress-line__seek {
    top: -1rem
}

.pinned-audio-progress-wrapper {
    position: absolute;
    height: .5rem;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.pinned-audio-volume {
    align-items: center;
    position: relative;
    width: 2.5rem;
    height: 2.5rem
}

html.is-touch .pinned-audio-volume {
    display: none
}

.pinned-audio-volume-tunnel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -1rem;
    content: " "
}

.pinned-audio-volume .player-volume__icon {
    display: flex;
    cursor: pointer;
    pointer-events: all
}

.pinned-audio-volume .progress-line-container {
    position: absolute;
    top: 100%;
    width: 5rem;
    padding: .75rem 1rem;
    margin-top: 2.25rem;
    transform: rotate(270deg);
    border-radius: 10px;
    background-color: var(--surface-color);
    box-shadow: 0 1px 5px #00000026;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-in-out, visibility 0s .2s
}

body.animation-level-0 .pinned-audio-volume .progress-line-container {
    transition: none !important
}

.pinned-audio-volume:hover .progress-line-container, .pinned-audio-volume:active .progress-line-container {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease-in-out, visibility 0s 0s
}

.pinned-requests-title {
    color: var(--primary-color);
    font-weight: var(--font-weight-bold)
}

@media only screen and (min-width: 1276px) {
    .pinned-requests-title {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-requests-title {
        transform: translate3d(calc(var(--right-column-width) * 1 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-requests-title {
        transition: none
    }
}

.pinned-requests-title, .pinned-requests .stacked-avatars {
    pointer-events: none
}

.pinned-requests-wrapper {
    justify-content: space-between
}

.pinned-actions-button {
    flex: 0 0 auto;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    height: 100%;
    width: 100%;
    cursor: pointer;
    line-height: var(--container-height);
    display: flex;
    align-items: center;
    justify-content: center
}

.pinned-actions-button.half {
    width: 50%
}

@media only screen and (min-width: 1276px) {
    .pinned-actions-button {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-actions-button {
        transform: translate3d(calc(var(--right-column-width) * 1 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-actions-button {
        transition: none
    }
}

.pinned-actions-button-text {
    display: block;
    pointer-events: none
}

@media only screen and (min-width: 1276px) {
    .pinned-actions-button.is-first .pinned-actions-button-text {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-actions-button.is-first .pinned-actions-button-text {
        transform: translate3d(calc(var(--right-column-width) * -.5 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-actions-button.is-first .pinned-actions-button-text {
        transition: none
    }
}

@media only screen and (min-width: 1276px) {
    .pinned-actions-button.is-last .pinned-actions-button-text {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-actions-button.is-last .pinned-actions-button-text {
        transform: translate3d(calc(var(--right-column-width) * .5 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-actions-button.is-last .pinned-actions-button-text {
        transition: none
    }
}

.pinned-actions-wrapper {
    align-items: center;
    padding: 0 !important;
    opacity: 1
}

body.animation-level-2 .pinned-actions-wrapper {
    transition: opacity var(--transition-standard-in)
}

.pinned-actions-wrapper-utils {
    margin-inline-start: -3.5rem
}

.pinned-actions-wrapper.is-disabled {
    pointer-events: none;
    opacity: var(--disabled-opacity)
}

.pinned-translation {
    height: var(--pinned-translation-height) !important;
    color: var(--primary-color);
    font-size: var(--font-size-15)
}

.pinned-translation-button {
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: .375rem
}

@media only screen and (min-width: 1276px) {
    .pinned-translation-button {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-translation-button {
        transform: translate3d(calc(var(--right-column-width) * 1 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-translation-button {
        transition: none
    }
}

.pinned-translation-button-icon {
    font-size: 1.25rem
}

.pinned-translation-menu {
    position: absolute;
    inset-inline-end: 1.25rem;
    padding: .25rem
}

@media only screen and (min-width: 1276px) {
    .pinned-translation-menu {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-translation-menu {
        transform: translate3d(calc(var(--right-column-width) * -1 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-translation-menu {
        transition: none
    }
}

@media only screen and (max-width: 600px) {
    .pinned-translation-menu {
        inset-inline-end: .75rem
    }
}

.pinned-remove-fee {
    --container-height: 64px;
    cursor: initial
}

@media only screen and (min-width: 1276px) {
    .pinned-remove-fee {
        transition: transform var(--transition-standard-out)
    }

    body.is-right-column-shown .pinned-remove-fee {
        transform: translate3d(calc(var(--right-column-width) * 1 * -.5 * var(--reflect)), 0, 0);
        transition: transform var(--transition-standard-in)
    }

    body.animation-level-0 .pinned-remove-fee {
        transition: none
    }
}

.markup-tooltip {
    background: var(--surface-color);
    border-radius: 10px;
    transform: translateZ(0);
    opacity: 0;
    transition: opacity var(--layer-transition), transform var(--layer-transition), width var(--layer-transition);
    position: fixed;
    inset: 0;
    height: 44px;
    width: 282px;
    overflow: hidden;
    z-index: 5;
    display: flex;
    justify-content: flex-start
}

body.animation-level-0 .markup-tooltip {
    transition: none
}

.markup-tooltip-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 702px;
    height: 100%;
    transform: translate(0);
    transition: transform var(--layer-transition);
    max-width: 100%
}

body.animation-level-0 .markup-tooltip-wrapper {
    transition: none
}

.markup-tooltip-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px;
    flex: 0 0 auto;
    max-width: 100%
}

.markup-tooltip-tools-regular {
    width: 282px
}

.markup-tooltip-tools-link {
    width: 420px
}

.markup-tooltip-tools-link .markup-tooltip-delimiter {
    margin: 0 .25rem
}

.markup-tooltip-delimiter {
    width: 1px;
    height: 25px;
    background-color: var(--border-color)
}

.markup-tooltip .btn-icon {
    border-radius: 8px !important;
    width: 30px;
    height: 30px;
    padding: 0
}

.markup-tooltip .btn-icon.active {
    color: #fff !important;
    background-color: var(--primary-color) !important
}

.markup-tooltip:not(.is-visible) {
    pointer-events: none
}

.markup-tooltip.is-visible {
    opacity: 1
}

.markup-tooltip.is-link {
    width: 420px
}

.markup-tooltip.is-link .markup-tooltip-wrapper {
    transform: translate(-282px)
}

.markup-tooltip-link-apply {
    color: var(--primary-color);
    font-size: 2rem
}

.markup-tooltip-link-apply-container {
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--layer-transition);
    pointer-events: none
}

body.animation-level-0 .markup-tooltip-link-apply-container {
    transition: none
}

.markup-tooltip .input-clear {
    flex: 1 1 auto;
    text-overflow: ellipsis;
    margin: 0 .5rem
}

.markup-tooltip .input-clear.is-valid + .markup-tooltip-link-apply-container {
    opacity: 1;
    pointer-events: all
}

.stickers-helper > .scrollable {
    position: relative;
    max-height: 13.75rem;
    min-height: var(--esg-sticker-size);
    padding: .4375rem
}

.stickers-helper-stickers {
    max-width: 100%;
    border-radius: var(--border-radius)
}

html.no-touch .stickers-helper .super-sticker:not(.active):hover, html.no-touch .stickers-helper .super-sticker:not(.active):active {
    background: none
}

.emoji-helper {
    height: 50px;
    padding: .25rem 0 !important
}

.emoji-helper > .scrollable {
    position: relative;
    width: auto
}

.emoji-helper .super-emojis {
    display: block;
    white-space: nowrap
}

.emoji-helper .super-emojis:before, .emoji-helper .super-emojis:after {
    display: inline-block;
    content: " ";
    width: .25rem
}

html.no-touch .emoji-helper .super-emoji:not(.active):hover, html.no-touch .emoji-helper .super-emoji:not(.active):active {
    background: none
}

.emoji-helper .super-emoji.active {
    background-color: var(--primary-color) !important;
    border-radius: var(--border-radius)
}

.inline-helper {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.inline-helper:not(.is-gallery) {
    min-width: min(20rem, 100%)
}

.inline-helper .scrollable {
    position: relative;
    max-height: 232px
}

.inline-helper-separator {
    height: 1px;
    width: 100%;
    margin-left: 4rem;
    background-color: var(--border-color)
}

.inline-helper-separator:last-child {
    display: none
}

.inline-helper .btn-primary {
    border-radius: unset;
    margin-top: 0 !important
}

.inline-helper-results:not(.is-gallery) {
    cursor: pointer
}

.inline-helper-results:not(.is-gallery) .inline-helper-result {
    height: 4rem;
    padding: .5rem .5rem .5rem 4rem;
    line-height: var(--line-height)
}

.inline-helper-results:not(.is-gallery) .inline-helper-result-preview {
    position: absolute;
    left: .5rem;
    width: 3rem !important;
    height: 3rem !important;
    overflow: hidden
}

.inline-helper-results:not(.is-gallery) .inline-helper-result-preview.empty {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.75rem;
    background-color: var(--primary-color);
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.inline-helper .media-container {
    border-radius: inherit
}

.inline-helper .media-photo, .inline-helper .media-video, .inline-helper .media-poster {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.inline-helper .gif {
    position: absolute;
    inset: 0;
    width: auto !important;
    height: auto !important
}

.inline-helper-results.is-gallery {
    max-width: 100%;
    border-radius: var(--border-radius);
    grid-template-columns:repeat(auto-fill, minmax(var(--esg-sticker-size), 1fr));
    grid-gap: 1px
}

.inline-helper-results.is-gallery .inline-helper-result {
    width: auto !important;
    height: auto !important
}

.inline-helper-result {
    position: relative
}

.inline-helper-result-title {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.inline-helper-result-description {
    font-size: .875rem;
    color: var(--secondary-text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-wrap
}

.inline-helper-cant-send {
    display: none;
    margin: 0 auto;
    color: var(--secondary-text-color)
}

.inline-helper.cant-send {
    width: 100% !important;
    height: 3rem
}

.inline-helper.cant-send .scrollable-y {
    display: none
}

.inline-helper.cant-send .inline-helper-cant-send {
    display: block
}

.chat-search {
    position: absolute !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2
}

.chat-search-footer {
    height: 3rem;
    padding: 0 8px;
    flex: 0 0 auto;
    width: 100%;
    background-color: var(--surface-color);
    display: flex;
    align-items: center;
    box-shadow: 0 -2px 4px #0000000d;
    overflow: hidden;
    z-index: 2
}

.chat-search-footer-left {
    display: flex;
    align-items: center;
    gap: .5rem
}

.chat-search-footer-right {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    color: var(--primary-color)
}

.chat-search-footer-type {
    cursor: pointer;
    padding: .5rem
}

.chat-search-footer-type, .chat-search-footer-count {
    font-weight: var(--font-weight-bold)
}

.chat-search-footer + .chat-input {
    display: none
}

.chat-search-results {
    inset: 3.5rem 0 0;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background-color: var(--surface-color);
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 2;
    padding-bottom: 3rem
}

body.animation-level-0 .chat-search-results {
    transition: none
}

.chat-search-results.active {
    opacity: 1;
    visibility: visible
}

.chat-search-results.search-top-active {
    margin-top: 3rem
}

.chat-search-results .user-title {
    font-weight: var(--font-weight-bold)
}

.chat-search-results .is-empty {
    display: none
}

.chat-search-results .topbar-search-left-results-padding {
    height: 3rem
}

.chat-search-top {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background-color: var(--surface-color);
    height: 3rem
}

.chat-search-go {
    --translateY: 0;
    bottom: 3.5rem;
    inset-inline-end: .625rem;
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: 0 0 10px #00000014 !important;
    font-size: 1.625rem
}

.chat-search-go.is-end {
    color: rgba(var(--secondary-text-color-rgb), .2);
    pointer-events: none
}

.chat-search-go-up {
    margin-bottom: 2.75rem
}

.drops-container {
    --padding: 0px;
    position: absolute !important;
    z-index: 3;
    top: var(--padding);
    right: var(--padding);
    bottom: var(--padding);
    left: var(--padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: auto !important;
    gap: 10px
}

.drops-container:not(.is-visible) {
    display: none
}

.drops-container.is-visible {
    animation: fade-in-opacity .2s linear forwards
}

.drops-container.is-visible.backwards {
    animation: fade-in-backwards-opacity .2s linear forwards
}

.drop {
    --wrapper-padding: -4px;
    background-color: var(--surface-color);
    position: relative;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a2acb4;
    transition: color .2s ease-in-out;
    pointer-events: all;
    flex: 1 1 auto
}

.drop-outline-wrapper {
    position: absolute;
    top: var(--wrapper-padding);
    right: var(--wrapper-padding);
    bottom: var(--wrapper-padding);
    left: var(--wrapper-padding);
    pointer-events: none
}

.drop-outline-path {
    fill: none;
    stroke-dasharray: 13.5, 11;
    stroke: #a2acb4;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke .2s ease-in-out;
    stroke-dashoffset: 0
}

.drop.is-dragover .drop-outline-path {
    animation: drop-outline-move .5s linear infinite;
    stroke: var(--primary-color)
}

.drop-icon {
    font-size: 6rem
}

.drop-header {
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem
}

.drop.has-icon .drop-header {
    margin-top: -10px
}

@media only screen and (max-height: 670px) {
    .drop-icon {
        font-size: 0
    }

    .drop-header {
        margin-top: 0 !important
    }
}

.drop.is-dragover {
    color: var(--primary-color)
}

@keyframes drop-outline-move {
    0% {
        stroke-dashoffset: 0
    }
    to {
        stroke-dashoffset: -24.5
    }
}

body.is-dragging .page-chats {
    pointer-events: none
}

.bot-commands {
    --border-radius-padding: 24px;
    --offset: .5rem;
    position: absolute !important;
    bottom: calc(100% - var(--border-radius-padding));
    right: calc(var(--offset) * -1);
    left: calc(var(--offset) * -1);
    width: auto !important;
    max-height: 20rem;
    max-width: none;
    border-radius: 12px 12px 0 0 !important;
    background-color: transparent !important;
    pointer-events: none;
    overflow: hidden;
    padding: var(--offset) var(--offset) 0 !important;
    box-shadow: none;
    animation: none !important;
    visibility: visible !important;
    transition: none !important
}

body.animation-level-2 .bot-commands {
    display: flex !important
}

.bot-commands .scrollable {
    background-color: var(--surface-color);
    box-shadow: 0 1px 8px 1px #0000001f;
    border-radius: inherit;
    height: auto;
    pointer-events: all;
    max-height: 207px !important
}

body.animation-level-2 .bot-commands .scrollable {
    opacity: 0;
    transform: translateY(var(--height))
}

.bot-commands.is-visible.animating .scrollable {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.bot-commands.is-visible:not(.backwards) .scrollable {
    transform: translateY(0);
    opacity: 1
}

.bot-commands-list {
    border-radius: inherit;
    width: 100%;
    height: var(--height);
    padding-bottom: 0
}

.bot-commands-list-element {
    border-radius: 0 !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-inline-start: 3.375rem
}

.bot-commands-list-element-avatar {
    position: absolute;
    inset-inline-start: .75rem
}

.bot-commands-list-element-name, .bot-commands-list-element-description {
    margin-inline-start: 0;
    font-size: .875rem;
    line-height: var(--line-height-14)
}

.crop .overlay::-moz-selection, .crop-component::-moz-selection {
    background: transparent
}

.crop .overlay::selection, .crop-component::selection {
    background: transparent
}

.crop-image, .crop-overlay-image {
    width: auto;
    height: auto;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.crop-image {
    display: block;
    position: relative;
    pointer-events: none
}

.crop-component {
    position: relative;
    z-index: 999;
    background-color: #fff;
    margin: 0 auto;
    overflow: hidden
}

.crop-component > img {
    max-width: 100%
}

.crop-overlay {
    position: absolute;
    z-index: 999;
    overflow: hidden;
    box-sizing: content-box;
    border-radius: 50%
}

html.no-touch .crop-overlay:hover, .crop-overlay:active {
    cursor: move
}

.crop-overlay-image {
    position: absolute;
    display: block
}

.crop-overlay-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffffb3;
    border-radius: 8px
}

.crop.is-forum .crop-overlay {
    border-radius: var(--avatar-border-radius-forum)
}

.sidebar-header {
    background-color: var(--surface-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    min-height: 3.5rem;
    flex: 0 0 auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default
}

.sidebar-header .btn-menu {
    overflow-y: overlay
}

@media only screen and (max-width: 600px) {
    .sidebar-header {
        padding-inline: .5rem
    }
}

.sidebar-header__rows {
    overflow: hidden;
    flex: 1 1 auto
}

.sidebar-header__rows .sidebar-header__title {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16)
}

.sidebar-header__title {
    flex: 1;
    font-weight: var(--font-weight-bold);
    padding-inline-start: 1.5rem;
    font-size: 1.25rem;
    color: var(--primary-text-color)
}

.sidebar-header__subtitle {
    color: var(--secondary-text-color);
    font-size: var(--font-size-14);
    line-height: 20px;
    padding-inline-start: 1.5rem
}

.sidebar-header__subtitle .transition {
    height: 20px
}

.sidebar-header__title, .sidebar-header__subtitle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.sidebar-header .btn-icon + .btn-icon {
    margin-inline-start: .5rem
}

.sidebar-header-right {
    flex: 0 0 auto
}

.scrollable-y-bordered .sidebar-header {
    position: relative
}

.scrollable-y-bordered .sidebar-header:after {
    content: " ";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    opacity: 0;
    z-index: 1;
    background-color: var(--border-color)
}

body.animation-level-2 .scrollable-y-bordered .sidebar-header:after {
    transition: opacity var(--transition-standard-in)
}

.scrollable-y-bordered:not(.scrolled-start) .sidebar-header:after {
    opacity: 1
}

.sidebar-close-button {
    overflow: inherit !important;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem
}

.sidebar-content {
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    position: relative;
    flex: 1 1 auto
}

.sidebar-emoji-status-emoji .sparkles-container {
    color: var(--sparkles-color, var(--primary-text-color));
    font-size: 6px;
    opacity: .5
}

.profile-avatars-container {
    --secondary-opacity-max: 1;
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: var(--surface-color);
    z-index: 1;
    min-height: 276px
}

body.animation-level-2 .profile-avatars-container {
    transition: padding-bottom var(--transition-standard-in)
}

html.no-touch .profile-avatars-container:hover .profile-avatars-arrow, html.no-touch .profile-avatars-container:active .profile-avatars-arrow {
    opacity: .2
}

.profile-avatars-container.is-single .profile-avatars-arrow, .profile-avatars-container.is-single .profile-avatars-tabs {
    display: none
}

.profile-avatars-container.is-swiping .profile-avatars-arrow {
    opacity: 0 !important
}

.profile-avatars-container.has-stories .profile-avatars-avatar-fake {
    visibility: visible
}

.profile-avatars-avatars {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    transform: translateZ(-1px) scale(2);
    transform-origin: left top;
    transition: transform .2s ease-in-out;
    position: absolute
}

.scrollable.no-parallax .profile-avatars-avatars {
    transform: translate(0)
}

.profile-avatars-avatar {
    width: inherit;
    height: 0;
    padding-bottom: 100%;
    min-width: 100%;
    display: flex;
    position: relative
}

.profile-avatars-avatar .avatar-star {
    --size: 420px;
    opacity: 0
}

body.animation-level-2 .profile-avatars-avatar .avatar-star {
    transition: opacity var(--transition-standard-in)
}

body.animation-level-2 .profile-avatars-avatar.active {
    transform: scale(1);
    border-radius: 0;
    transition: transform var(--transition-standard-in), border-radius var(--transition-standard-in)
}

.profile-avatars-avatar .avatar-full {
    --multiplier: calc(54 / 420)
}

.profile-avatars-avatar .avatar {
    position: absolute !important
}

.profile-avatars-avatar .avatar-photo {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none
}

.has-stories .profile-avatars-avatar-first {
    opacity: 1;
    transition-delay: 0s, 0s;
    transform: scale(1)
}

body.animation-level-2 .has-stories .profile-avatars-avatar-first {
    transition: opacity .05s, transform var(--transition-standard-in)
}

.profile-avatars-avatar-fake {
    position: absolute !important;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    visibility: hidden
}

.profile-avatars-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(360deg, #0000004d 8.98%, #0000);
    pointer-events: none
}

body.animation-level-2 .profile-avatars-gradient {
    opacity: 1;
    transition: opacity var(--transition-standard-easing) calc(var(--transition-standard-in-time) / 2);
    transition-delay: calc(var(--transition-standard-in-time) / 2)
}

.profile-avatars-gradient-top {
    top: 0;
    bottom: auto;
    transform: scaleY(-1)
}

.profile-avatars-info {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    inset-inline: 1.5rem;
    bottom: .5625rem;
    pointer-events: none;
    transform: translateY(0)
}

body.animation-level-2 .profile-avatars-info {
    transition: transform var(--transition-standard-in), color var(--transition-standard-in)
}

.profile-avatars-info .profile-name, .profile-avatars-info .profile-subtitle {
    color: currentColor;
    margin: 0;
    text-align: start;
    inset-inline-start: 0;
    transform: translate(0);
    position: relative;
    white-space: nowrap
}

body.animation-level-2 .profile-avatars-info .profile-name, body.animation-level-2 .profile-avatars-info .profile-subtitle {
    transition: inset-inline-start var(--transition-standard-in), transform var(--transition-standard-in)
}

.profile-avatars-info .profile-subtitle {
    line-height: 16px
}

.profile-avatars-info .profile-subtitle, .profile-avatars-info .verified-icon, .profile-avatars-info .premium-icon, .profile-avatars-info .emoji-status-text-color {
    opacity: var(--secondary-opacity-max)
}

.profile-avatars-info .online {
    color: inherit !important
}

.profile-avatars-tabs {
    display: flex;
    position: absolute;
    top: .5rem;
    left: .375rem;
    right: .375rem;
    height: .125rem;
    pointer-events: none
}

body.animation-level-2 .profile-avatars-tabs {
    opacity: 1;
    transition: opacity var(--transition-standard-in)
}

.profile-avatars-tab {
    flex: 1 1 auto;
    border-radius: 4px;
    margin: 0 .125rem;
    background-color: #fff;
    opacity: .2;
    transition: opacity .2s ease-in-out;
    height: inherit
}

.profile-avatars-tab.active {
    opacity: .6
}

.profile-avatars-arrow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33.3333333333%;
    opacity: 0
}

body.animation-level-2 .profile-avatars-arrow {
    transition: opacity .2s ease-in-out
}

.profile-avatars-arrow-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.1875rem;
    color: #fff;
    left: .625rem
}

html.no-touch .profile-avatars-container:not(.is-swiping) .profile-avatars-arrow:hover, html.no-touch .profile-avatars-container:not(.is-swiping) .profile-avatars-arrow:active {
    opacity: 1
}

.profile-avatars-arrow-next {
    left: auto;
    right: 0
}

.profile-avatars-arrow-next .profile-avatars-arrow-icon {
    left: auto;
    right: .625rem
}

.profile-avatars-pattern {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: overlay
}

.profile-content {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

.profile-content .sidebar-left-section {
    position: relative;
    background-color: var(--surface-color);
    padding-bottom: .5rem
}

.profile-content .sidebar-left-section .profile-subtitle .peer-typing-container {
    justify-content: center
}

.profile-content.search-empty .gradient-delimiter {
    display: none
}

.profile-content .has-simple-avatar {
    margin-top: 3.5rem
}

@media only screen and (max-width: 600px) {
    .profile-button {
        border-radius: 0
    }
}

.profile-change-avatar {
    --size: 3.375rem;
    position: absolute !important;
    top: calc(var(--size) / -2);
    inset-inline-end: 1.25rem;
    transform: none;
    transition: none !important
}

.profile-container.is-collapsed .profile-avatars-container {
    padding-bottom: 66%
}

.profile-container.is-collapsed .profile-avatars-avatar.active {
    transform: translateY(-1.5%) scale(.2857142857);
    border-radius: 50%
}

.profile-container.is-collapsed .avatar-star {
    opacity: 1
}

.profile-container.is-collapsed .profile-avatars-tabs, .profile-container.is-collapsed .profile-avatars-gradient, .profile-container.is-collapsed .profile-avatars-arrow {
    opacity: 0 !important
}

.profile-container.is-collapsed .profile-avatars-gradient {
    transition-delay: 0s
}

.profile-container.is-collapsed .profile-avatars-info {
    transform: translateY(-42%)
}

.profile-container.is-collapsed .profile-avatars-info .profile-name, .profile-container.is-collapsed .profile-avatars-info .profile-subtitle {
    inset-inline-start: 50%;
    transform: translate(-50%)
}

.profile-container.is-collapsed .has-stories .profile-avatars-avatar-first {
    opacity: 0;
    transform: scale(.8916666667);
    transition-delay: calc(var(--transition-standard-in-time) - .05s), 0s
}

.profile-container.is-collapsed:not(.need-white) .profile-avatars-info {
    color: var(--primary-text-color)
}

.profile-container.is-collapsed:not(.need-white) .profile-avatars-info .profile-subtitle {
    color: var(--secondary-text-color);
    opacity: 1
}

.profile-container.need-white .profile-avatars-container {
    --secondary-opacity-max: .7
}

.profile-container.need-white .profile-avatars-info, .profile-container.need-white .profile-subtitle {
    color: #fff
}

.profile-container.need-white .show-when {
    background-color: #fff3
}

.profile-container.need-white .topic-name-button {
    --primary-color: #fff
}

.profile-container.need-white .peer-typing-container {
    --color: #fff
}

.profile-container.need-white .profile-avatars-container .premium-icon {
    color: #fff
}

.profile-container.need-white .profile-avatars-container .verified-icon-background {
    fill: #fff
}

.profile-container.need-white .profile-avatars-container .verified-icon-check {
    visibility: hidden
}

.profile-container:not(.header-filled) .sidebar-header {
    background-color: transparent
}

.profile-container:not(.header-filled) .sidebar-header:after {
    opacity: 0
}

.profile-container:not(.header-filled).need-white .sidebar-header {
    --light-secondary-text-color: rgba(255, 255, 255, .08);
    --ripple-color: var(--light-secondary-text-color)
}

.profile-container:not(.header-filled).need-white .sidebar-header .sidebar-header__title, .profile-container:not(.header-filled).need-white .sidebar-header .btn-icon {
    color: #fff
}

.profile-container .sidebar-header {
    --transition: .1s ease-in-out;
    position: absolute;
    inset-inline: 0;
    z-index: 2
}

body.animation-level-2 .profile-container .sidebar-header {
    transition: background-color var(--transition)
}

body.animation-level-2 .profile-container .sidebar-header:after {
    transition: opacity var(--transition)
}

.profile-container .sidebar-header .animated-close-icon:before, .profile-container .sidebar-header .animated-close-icon:after {
    background-color: currentColor
}

body.animation-level-2 .profile-container .sidebar-header .sidebar-header__title, body.animation-level-2 .profile-container .sidebar-header .btn-icon {
    transition: color var(--transition)
}

.profile-container > .scrollable {
    display: flex;
    flex-direction: column
}

.profile-container .search-super-tabs-scrollable {
    top: 3.5rem
}

.profile-name {
    text-align: center;
    font-size: var(--font-size-20);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-bold);
    min-width: 0;
    max-width: 21.25rem;
    margin: 0 auto;
    color: var(--primary-text-color);
    display: flex;
    align-items: flex-end
}

.profile-name .emoji-native {
    vertical-align: inherit;
    min-width: -moz-min-content;
    min-width: min-content
}

.profile-name .peer-title:not(.with-icons) {
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.sidebar-left-section-content > .profile-name {
    justify-content: center
}

.profile-name .badge-fake {
    align-self: center
}

.profile-subtitle {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: .875rem;
    margin-bottom: .875rem;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 600px) {
    .profile-subtitle {
        margin-top: 3px
    }
}

.profile-subtitle .online {
    color: var(--primary-color)
}

.profile-subtitle .show-when {
    margin-inline-start: .25rem;
    cursor: pointer;
    pointer-events: all
}

.profile-avatar {
    margin: .5rem auto 10px;
    display: block
}

@media only screen and (max-width: 600px) {
    .profile-avatar {
        margin: 0 auto 10px;
        --size: 100px;
        --multiplier: .54
    }
}

.profile-name, .profile-subtitle, .profile-avatar {
    flex: 0 0 auto
}

.profile-pinned-gifts {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 4.5rem;
    left: 50%;
    transform: translate(-50%) scale(1);
    opacity: 1;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    transform-origin: center
}

@media only screen and (max-width: 600px) {
    .profile-pinned-gifts {
        top: calc(4.5rem + 5vw);
        width: 28.5%;
        height: auto;
        aspect-ratio: 1/1
    }
}

.profile-container:not(.is-collapsed) .profile-pinned-gifts {
    opacity: 0;
    transform: translate(-50%) scale(1.2)
}

.profile-pinned-gift {
    position: absolute;
    width: 30px;
    height: 30px
}

.profile-pinned-gift:before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--halo-color);
    border-radius: 50%;
    filter: blur(15px) saturate(1.5)
}

.profile-pinned-gift[data-idx="0"] {
    left: -36px;
    top: -3px
}

.profile-pinned-gift[data-idx="1"] {
    left: -96px;
    top: 57px
}

.profile-pinned-gift[data-idx="2"] {
    left: -31px;
    top: 87px
}

.profile-pinned-gift[data-idx="3"] {
    right: -54px;
    top: 17px
}

.profile-pinned-gift[data-idx="4"] {
    right: -114px;
    top: 37px
}

.profile-pinned-gift[data-idx="5"] {
    right: -84px;
    top: 87px
}

.star-gifts-profile-tab {
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    height: 100%
}

.menu-horizontal-scrollable {
    --scrollable-size: 3rem;
    height: var(--scrollable-size)
}

.menu-horizontal-scrollable:after {
    content: " ";
    position: absolute;
    height: 1px;
    border-bottom: 1px solid var(--border-color);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1
}

.menu-horizontal-scrollable .menu-horizontal-div {
    border-bottom: none
}

.menu-horizontal-div {
    --size: var(--scrollable-size, 3rem);
    --padding-horizontal: 0px;
    width: 100%;
    height: var(--size);
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    position: relative;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--secondary-text-color);
    border-bottom: 1px solid var(--border-color)
}

.menu-horizontal-div:not(.no-stripe):before, .menu-horizontal-div:not(.no-stripe):after {
    content: " ";
    width: var(--padding-horizontal);
    flex: 0 0 auto
}

.menu-horizontal-div:not(.no-stripe) .menu-horizontal-div-item {
    border-radius: 10px 10px 0 0
}

.menu-horizontal-div-item {
    height: 100%;
    padding: 0 1rem;
    cursor: pointer;
    text-align: center;
    flex: 1 1 auto;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    position: relative;
    transition: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--line-height);
    border-radius: 0
}

html.no-touch .menu-horizontal-div-item:hover, html.no-touch .menu-horizontal-div-item:active {
    background-color: var(--light-secondary-text-color)
}

.menu-horizontal-div-item.active {
    color: var(--primary-color)
}

.menu-horizontal-div-item.active i {
    opacity: 1
}

.menu-horizontal-div-item.active .c-ripple__circle, html.no-touch .menu-horizontal-div-item.active:hover, html.no-touch .menu-horizontal-div-item.active:active {
    background-color: var(--light-primary-color)
}

.menu-horizontal-div-item.active .badge {
    background-color: var(--primary-color)
}

.menu-horizontal-div-item-span {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    pointer-events: none;
    white-space: nowrap
}

.menu-horizontal-div i {
    position: absolute;
    bottom: -.8125rem;
    left: 0;
    opacity: 0;
    background-color: var(--primary-color);
    height: .1875rem;
    width: 100%;
    border-radius: .1875rem .1875rem 0 0;
    pointer-events: none;
    box-sizing: content-box;
    transform-origin: left;
    z-index: 1
}

.menu-horizontal-div i.animate {
    transition: transform var(--tabs-transition)
}

.tabs-container {
    min-width: 100%;
    width: 100%;
    display: grid;
    grid-template-columns:100%;
    grid-template-rows:100%
}

.tabs-container .tabs-tab {
    display: none;
    flex-direction: column;
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: var(--background-color);
    overflow: hidden
}

body.animation-level-0 .tabs-container .tabs-tab {
    transition: none !important
}

.tabs-container .tabs-tab.active {
    display: flex
}

.tabs-container[data-animation=tabs] .tabs-tab, .tabs-container[data-animation=premiumTabs] .tabs-tab {
    transition: transform var(--tabs-transition)
}

.tabs-container[data-animation=navigation].animating .tabs-tab {
    transition: transform var(--transition-standard-in), filter var(--transition-standard-in)
}

.tabs-container[data-animation=navigation].animating.backwards .tabs-tab {
    transition: transform var(--transition-standard-out), filter var(--transition-standard-out)
}

:root {
    --sidebar-collapsed-width: 80px
}

#column-left {
    flex-direction: column;
    --current-width: var(--current-sidebar-left-width, 420px);
    flex: var(--current-width) 1 auto;
    max-width: 420px;
    width: var(--current-width)
}

#column-left .sidebar-header-search-trigger {
    display: none
}

@media only screen and (min-width: 926px) {
    #column-left.is-collapsed {
        width: var(--sidebar-left-width-when-collapsed, var(--sidebar-collapsed-width))
    }

    #column-left.is-collapsed > .sidebar-slider {
        overflow: hidden;
        width: 100%
    }

    #column-left.is-collapsed > .sidebar-slider > .tabs-tab {
        width: var(--sidebar-left-inner-width-when-collapsed, var(--sidebar-collapsed-width))
    }

    #column-left.is-collapsed #chatlist-container {
        --stories-scrolled: 92px !important
    }

    #column-left.is-collapsed #chatlist-container .chatlist {
        padding: 0
    }

    #column-left.is-collapsed #chatlist-container .virtual-chatlist {
        margin: 0 !important
    }

    #column-left.is-collapsed #chatlist-container .loading-dialog-skeleton {
        padding-left: 13px
    }

    #column-left.is-collapsed #chatlist-container .chatlist-chat {
        padding-inline-end: 0;
        border-radius: 0
    }

    #column-left.is-collapsed #chatlist-container .chatlist-chat .row-media-bigger {
        inset-inline-start: 13px !important
    }

    #column-left.is-collapsed #chatlist-container .chatlist-chat .row-row {
        display: none
    }

    body.has-folders-sidebar #column-left.is-collapsed .sidebar-header-search-trigger {
        display: block;
        width: 0px;
        transition: width .1s, opacity .2s;
        overflow: hidden;
        margin-left: 4px
    }

    #column-left.is-collapsed #new-menu {
        display: none !important
    }

    #column-left.is-collapsed .btn-corner.btn-update {
        position: fixed !important;
        left: calc(max(0px, (100vw - 1680px) / 2) + 12px) !important;
        z-index: 4
    }

    #column-left.is-collapsed .stories-list {
        display: none
    }

    #column-left.is-collapsed:not(.has-real-tabs) .topics-container {
        transform: translate(0) !important
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed:not(.has-open-tabs) .sidebar-header.main-search-sidebar-header .sidebar-header__btn-container:not(.force-static) {
        position: fixed;
        top: 8px;
        left: calc(max(0px, (100vw - 1680px) / 2) + 20px) !important
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed:not(.has-open-tabs) .force-static {
        margin-left: 4px
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed.can-menu-have-z-index:not(.has-open-tabs) .sidebar-header.main-search-sidebar-header .sidebar-header__btn-container:not(.force-static) {
        z-index: 4
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed.force-hide-menu .btn-menu {
        display: none
    }

    #column-left.is-collapsed:not(.has-open-tabs):not(.animate-search-out) .sidebar-header.main-search-sidebar-header > :not(.sidebar-header-search-trigger):not(.sidebar-header__btn-container), #column-left.is-collapsed.force-hide-search .sidebar-header.main-search-sidebar-header > :not(.sidebar-header-search-trigger):not(.sidebar-header__btn-container) {
        display: none
    }

    body.has-folders-sidebar #column-left.is-collapsed:not(.has-open-tabs):not(.animate-search-out) .sidebar-header.main-search-sidebar-header .sidebar-header-search-trigger, body.has-folders-sidebar #column-left.is-collapsed.force-hide-search .sidebar-header.main-search-sidebar-header .sidebar-header-search-trigger {
        width: 40px
    }

    #column-left.is-collapsed:not(.has-open-tabs) .sidebar-left-contacts-section, #column-left.is-collapsed.force-hide-large-content .sidebar-left-contacts-section {
        display: none
    }

    #column-left.is-collapsed:not(.has-open-tabs) .empty-placeholder, #column-left.is-collapsed.force-hide-large-content .empty-placeholder {
        display: none
    }

    body.has-folders-sidebar #column-left.is-collapsed.animate-search-out .sidebar-header.main-search-sidebar-header {
        transform: translate(20px);
        opacity: 0;
        transition: .1s ease-out
    }

    body.has-folders-sidebar #column-left.is-collapsed.animate-search-out .sidebar-header.main-search-sidebar-header .sidebar-header-search-trigger {
        opacity: 0
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed.animate-search-out .sidebar-header.main-search-sidebar-header > :not(.sidebar-header__btn-container) {
        transform: translate(20px);
        opacity: 0;
        transition: .1s ease-out
    }

    #column-left.is-collapsed.has-open-tabs, #column-left.is-collapsed.force-fixed {
        position: fixed;
        top: 0;
        bottom: 0;
        left: calc(max(0px, (100vw - 1680px) / 2) + var(--sidebar-collapsed-width)) !important;
        z-index: 3;
        width: var(--sidebar-left-width-when-collapsed, 420px)
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed.has-open-tabs, body:not(.has-folders-sidebar) #column-left.is-collapsed.force-fixed {
        left: max(0px, (100vw - 1680px) / 2) !important
    }

    #column-left.is-collapsed.has-open-tabs > .sidebar-slider > .tabs-tab, #column-left.is-collapsed.force-fixed > .sidebar-slider > .tabs-tab {
        width: var(--sidebar-left-inner-width-when-collapsed, 420px)
    }

    #column-left.is-collapsed.has-open-tabs .btn-corner.btn-update, #column-left.is-collapsed.force-fixed .btn-corner.btn-update {
        display: none
    }

    body:not(.has-folders-sidebar) #column-left.is-collapsed.has-open-tabs .sidebar-header__btn-container, body:not(.has-folders-sidebar) #column-left.is-collapsed.force-fixed .sidebar-header__btn-container {
        margin-left: 4px
    }

    #column-left.is-collapsed.force-chatlist-thin #chatlist-container .chatlist {
        width: var(--sidebar-collapsed-width)
    }

    body.has-folders-sidebar #column-left.is-collapsed.has-open-tabs.has-forum-open .sidebar-header.main-search-sidebar-header {
        pointer-events: none
    }

    body.has-folders-sidebar #column-left.is-collapsed.has-open-tabs.has-forum-open .sidebar-header-search-trigger {
        opacity: 0
    }

    body.has-folders-sidebar #column-left .tabs-tab.item-main {
        --stories-additional-offset: -40px
    }
}

@media only screen and (max-width: 600px) {
    #column-left {
        width: 100%;
        max-width: 100%
    }

    body:not(.is-left-column-shown) #column-left {
        transform: translate3d(-25vw, 0, 0);
        filter: brightness(80%)
    }
}

@media only screen and (min-width: 601px) {
    #column-left {
        overflow: visible
    }

    #column-left:after {
        position: absolute;
        content: " ";
        display: block;
        height: 100vh;
        width: 1px;
        background-color: var(--border-color);
        inset-inline-end: -1px;
        top: 0;
        z-index: 3;
        pointer-events: none
    }
}

@media only screen and (min-width: 601px) and (max-width: 925px) {
    #column-left {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        width: 26.5rem;
        transform: translate3d(-5rem, 0, 0);
        transition: transform var(--layer-transition);
        max-width: unset
    }

    body.animation-level-0 #column-left {
        transition: none
    }

    body.is-left-column-shown #column-left {
        transform: translateZ(0)
    }
}

@media only screen and (min-width: 926px) {
    #column-left {
        display: flex
    }
}

@media only screen and (max-width: 1275px) {
    #column-left {
        flex: var(--current-width) 2 auto
    }
}

@media only screen and (min-width: 1681px) {
    html.is-safari #column-left {
        max-width: 418.75px
    }
}

#column-left .item-main .menu-horizontal-scrollable {
    z-index: 1;
    background-color: var(--surface-color);
    position: relative;
    top: unset
}

@media only screen and (max-width: 600px) {
    #column-left .item-main .menu-horizontal-scrollable {
        box-shadow: 0 1px 5px -1px #00000029
    }
}

#column-left .item-main .menu-horizontal-scrollable .scrollable {
    position: relative
}

#column-left .item-main .menu-horizontal-scrollable .badge {
    margin-inline-start: 5px
}

#column-left .item-main .menu-horizontal-scrollable:not(.hide) + #folders-container {
    height: calc(100% - var(--scrollable-size))
}

#column-left .item-main .menu-horizontal-scrollable:not(.hide) + #folders-container .scrollable {
    padding-top: .5rem
}

#column-left .item-main .menu-horizontal-scrollable:not(.hide) + #folders-container .dialogs-placeholder-canvas {
    top: .5rem
}

#column-left .item-main .menu-horizontal-div {
    position: relative !important;
    justify-content: flex-start;
    z-index: 0;
    --padding-horizontal: .6875rem
}

@media only screen and (max-width: 600px) {
    #column-left .item-main .menu-horizontal-div {
        --padding-horizontal: .1875rem
    }
}

#column-left .item-main .menu-horizontal-div-item {
    flex: 0 0 auto;
    min-width: 3rem
}

#column-left .item-main .menu-horizontal-div__stripe {
    display: none
}

#column-left .folders-tabs-scrollable {
    flex: 0 0 auto
}

#column-left .item-main {
    --offset-top: 0;
    background-color: var(--surface-color)
}

#column-left .item-main .input-search .selector-user {
    --selector-user-size: 30px;
    position: absolute !important;
    inset-inline-start: 6px;
    top: 6px;
    z-index: 1;
    margin-inline-start: 0
}

#column-left .item-main .input-search.is-picked .input-search-input {
    padding-inline-start: calc(var(--paddingLeft) + 8px - var(--border-width))
}

#column-left .item-main .input-search.is-picked-twice .is-first {
    width: 30px
}

#column-left .item-main .input-search.is-picked-twice .is-last {
    inset-inline-start: 2.5rem
}

#column-left .item-main .sidebar-emoji-status {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    color: var(--primary-color)
}

#column-left .item-main .sidebar-emoji-status-emoji {
    position: relative;
    width: 1.5rem;
    height: 1.5rem
}

#column-left .item-main .search-helper {
    display: flex;
    margin-inline-start: 28px
}

@media only screen and (max-width: 600px) {
    #column-left .item-main .search-helper {
        margin-inline-start: 20px
    }
}

#column-left .item-main .search-helper .selector-user {
    margin-top: 7px;
    font-size: 14px
}

html.no-touch #column-left .item-main .search-helper .selector-user:hover, html.no-touch #column-left .item-main .search-helper .selector-user:active {
    background-color: var(--light-primary-color)
}

#column-left .item-main .search-helper .selector-user-avatar-close {
    display: none !important
}

#column-left .item-main .search-super-tabs-scrollable {
    flex: 0 0 auto;
    position: relative !important
}

#column-left .item-main .search-super-tabs-scrollable:before {
    display: none
}

#column-left .item-main .search-super-tabs-scrollable .menu-horizontal-div-item {
    flex: 1 0 auto !important
}

#column-left .item-main .search-super .preloader {
    height: 100%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#column-left #chatlist-container, #column-left #chats-archived-container {
    --stories-scrolled: 92px
}

#column-left #chatlist-container {
    max-height: 100%;
    position: relative;
    background-color: var(--surface-color)
}

#column-left #folders-container {
    position: relative;
    flex: 1 1 auto
}

#column-left #folders-container .scrollable-y {
    background-color: transparent;
    position: absolute
}

#column-left #folders-container .scrollable-y.active {
    display: block
}

#column-left .dialogs-placeholder-canvas {
    position: absolute;
    top: 0;
    z-index: 2
}

#column-left .sidebar-slider {
    height: 100%
}

#column-left .search-group-people .chatlist {
    display: flex;
    flex-direction: row;
    margin-top: -1px;
    padding: 0 0 1px
}

#column-left .search-group-people .chatlist:before, #column-left .search-group-people .chatlist:after {
    content: " ";
    display: inline-block;
    width: .3125rem;
    flex: 0 0 auto
}

#column-left .search-group-people .chatlist-chat {
    width: 4.875rem;
    max-width: 4.875rem;
    height: 6.125rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 !important;
    border-radius: 10px
}

#column-left .search-group-people .dialog-title-details, #column-left .search-group-people .dialog-subtitle {
    display: none
}

#column-left .search-group-people .dialog-title {
    max-width: 65px;
    padding-bottom: .75rem
}

#column-left .search-group-people .dialog-title .user-title {
    font-size: .75rem !important
}

#column-left .search-group-people .dialog-title .peer-title {
    font-weight: var(--font-weight-normal) !important
}

#column-left .search-group-people .dialog-avatar {
    inset-inline-start: auto !important;
    top: .75rem !important
}

#column-left .search-group-people .search-group-scrollable {
    position: relative
}

@media only screen and (max-width: 600px) {
    #column-left .search-group-people .search-group-scrollable {
        margin-inline-start: -7px;
        margin-top: 4px
    }
}

#column-left .search-group-people .search-group-scrollable > .scrollable {
    position: relative
}

#column-left .item-main .sidebar-content {
    justify-content: center
}

#column-left .item-main .sidebar-content .btn-menu {
    bottom: calc(100% + 10px)
}

#column-left .item-main .sidebar-content .btn-corner:not(.menu-open) .animated-button-icon-icon-first, #column-left .item-main .sidebar-content .btn-corner.menu-open .animated-button-icon-icon-last {
    visibility: visible;
    animation: grow-icon .4s forwards ease-in-out
}

@media only screen and (max-width: 600px) {
    #column-left .item-main .sidebar-content .btn-corner {
        --size: 54px;
        bottom: 14px;
        inset-inline-end: 14px;
        position: fixed !important;
        z-index: 1
    }
}

#column-left .item-main .sidebar-content .btn-corner:not(.is-hidden) {
    transform: translateZ(0)
}

#column-left .connection-status {
    width: 100%;
    padding: 0 .5rem .5rem;
    overflow: hidden;
    flex: 0 0 auto
}

#column-left .connection-status:not(.is-shown) .connection-status-button {
    display: none
}

#column-left .connection-status.is-shown.animating .connection-status-button, #column-left .connection-status.is-shown.animating + .connection-status-bottom {
    transition: transform var(--layer-transition)
}

#column-left .connection-status.is-shown:not(.backwards) .connection-status-button {
    transform: translateY(0)
}

#column-left .connection-status.is-shown:not(.backwards) + .connection-status-bottom {
    transform: translateY(calc(64px + var(--offset-top)))
}

#column-left .connection-status.is-shown:not(.animating):not(.backwards) + .connection-status-bottom {
    height: calc(100% - 64px + var(--offset-top))
}

#column-left .connection-status-button {
    color: #2e3939;
    align-self: center;
    cursor: default;
    padding-inline-start: 4.5rem;
    text-align: start;
    height: 3.5rem;
    transform: translateY(-100%)
}

#column-left .connection-status-button .force-reconnect {
    cursor: pointer;
    text-decoration: underline;
    color: inherit
}

#column-left .connection-status-button .preloader-container {
    right: auto;
    inset-inline-start: 1rem;
    width: 1.5rem;
    height: 1.5rem
}

#column-left .connection-status-button .preloader-container .preloader-path-new {
    stroke: #2e3939
}

#column-left .connection-status-bottom {
    --offset-top: 92px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--surface-color);
    transform: translateY(calc(var(--offset-top) - var(--stories-scrolled)));
    height: 100%;
    display: flex;
    flex-direction: column
}

body.animation-level-2 #column-left .connection-status-bottom {
    transition: transform var(--transition-standard-in)
}

#column-left .input-wrapper, .settings-slider-popup .input-wrapper {
    width: 420px;
    margin: 0 auto;
    flex: 0 0 auto;
    padding: 0 .75rem;
    max-width: 100%;
    margin: .75rem 0
}

@media only screen and (max-width: 600px) {
    #column-left .input-wrapper, .settings-slider-popup .input-wrapper {
        width: 100%
    }
}

.sidebar-left-overlay {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 3;
    background-color: #0000004d;
    transition: opacity .4s
}

@media only screen and (min-width: 926px) {
    html:has(#column-left.is-collapsed.has-open-tabs) .sidebar-left-overlay:not(.force-hide) {
        opacity: 1;
        pointer-events: initial
    }
}

.sidebar-left-placeholder {
    display: none
}

@media only screen and (min-width: 926px) {
    html:has(#column-left.is-collapsed.has-open-tabs) .sidebar-left-placeholder, .sidebar-left-placeholder.keep-active {
        display: block;
        flex: var(--sidebar-collapsed-width) 0 0;
        width: var(--sidebar-collapsed-width)
    }
}

.sidebar-tools-submenu {
    min-width: 200px
}

.sidebar-left-common .archived-count {
    justify-self: flex-end;
    margin-inline-start: .625rem
}

html.is-mobile .sidebar-left-common .archived-count {
    margin-inline-end: .375rem
}

@media only screen and (max-width: 600px) {
    .sidebar-left-common .archived-count {
        font-weight: var(--font-weight-bold)
    }
}

.sidebar-left-common .sidebar-header__btn-container {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (min-width: 926px) {
    body.has-folders-sidebar .sidebar-left-common .sidebar-header__btn-container {
        width: 0px;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: width .12s, opacity .12s
    }

    body.has-folders-sidebar .sidebar-left-common .sidebar-header__btn-container.is-visible {
        width: 2.5rem;
        opacity: 1;
        overflow: initial;
        pointer-events: initial
    }
}

.sidebar-left-common .sidebar-header__btn-container .btn-icon {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0
}

.sidebar-left-common .sidebar-header__btn-container .btn-icon.is-visible {
    opacity: 1;
    visibility: visible
}

@media only screen and (max-width: 600px) {
    .sidebar-left-common .sidebar-header__btn-container .btn-menu {
        margin-top: -.25rem
    }
}

.sidebar-left-common .sidebar-tools-button {
    width: 100%;
    position: relative
}

.sidebar-left-common .sidebar-tools-button-notifications {
    position: absolute;
    right: -4px;
    top: -2px;
    font-size: 12px
}

.sidebar-left-common .sidebar-tools-button .btn-menu {
    min-width: 200px;
    max-height: calc(100 * var(--vh) - 3.75rem)
}

.sidebar-left-common .sidebar-tools-button .btn-menu-item {
    --padding-right: .375rem
}

.is-mobile .sidebar-left-common .sidebar-tools-button .btn-menu-item {
    --padding-right: .75rem
}

.is-mobile .sidebar-left-common .sidebar-tools-button .btn-menu-item .btn-menu-item-text {
    margin-right: .75rem
}

.sidebar-left-common .sidebar-tools-button .btn-menu-item .submenu-label {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sidebar-left-common .sidebar-tools-button .btn-menu-item .submenu-label .tgico {
    font-size: 20px;
    transform: rotate(-90deg);
    color: var(--secondary-color)
}

.sidebar-left-common .btn-menu-account-item .badge {
    font-size: 12px;
    color: var(--badge-text-color) !important;
    background-color: var(--primary-color) !important;
    height: 20px;
    display: inline-flex;
    margin-inline-start: 1rem
}

#folders-sidebar .sidebar-tools-button-notifications {
    top: .5rem;
    right: .75rem
}

#search-container {
    display: flex;
    top: var(--offset-top) !important
}

#search-container .scrollable-y {
    position: relative;
    flex: 1 1 auto
}

.new-channel-container .sidebar-content, .new-group-container .sidebar-content, .edit-profile-container .sidebar-content {
    flex-direction: column
}

.new-channel-container .chatlist-container, .new-group-container .chatlist-container, .edit-profile-container .chatlist-container {
    flex: 1 1 auto
}

.new-channel-container .caption, .new-group-container .caption, .edit-profile-container .caption {
    font-size: .875rem;
    margin-top: 14px;
    margin-inline-start: 23px;
    color: var(--secondary-text-color);
    padding-inline-end: 24px
}

.new-group-container .search-group {
    margin-top: .5rem
}

.new-group-members {
    padding: 1.5rem 0 .4375rem
}

.new-group-members .search-group__name {
    text-transform: capitalize
}

.edit-profile-container .scroll-wrapper {
    width: 100%
}

.chat-folders-container, .edit-folder-container, .people-nearby-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.chat-folders-container .sticker-container, .edit-folder-container .sticker-container, .people-nearby-container .sticker-container {
    width: 86px;
    height: 86px;
    margin: .5rem auto 1rem;
    flex: 0 0 auto;
    position: relative
}

.chat-folders-container .caption, .edit-folder-container .caption, .people-nearby-container .caption {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    max-width: 20rem;
    margin: 0 auto
}

.shared-folder-container .sticker-container {
    margin-bottom: .375rem
}

.people-nearby-container .sticker-container {
    margin: 1rem auto
}

.people-nearby-container .caption {
    margin-bottom: 1rem
}

.edit-folder-container .caption {
    margin-bottom: 18px
}

@media only screen and (max-width: 600px) {
    .edit-folder-container .input-wrapper {
        width: 100%;
        padding: 0 16px
    }
}

.folder-categories .checkbox-field {
    position: absolute;
    right: 1.125rem !important
}

.included-chatlist-container .chatlist-chat {
    padding-inline-end: 3.5rem !important
}

.search-group-recent .search-group__name {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.search-group-recent .btn-icon {
    font-size: 22px
}

@media only screen and (max-width: 600px) {
    .search-group-recent.search-group.search-group-contacts ul {
        margin-top: 0
    }

    .search-group.search-group-contacts ul, .search-group.search-group-messages ul {
        margin-top: 7px
    }

    .search-group.search-group-messages {
        margin-top: -6px
    }
}

@media only screen and (min-width: 601px) {
    .search-group-recent.search-group.search-group-contacts {
        padding: 0 0 7px
    }
}

.sidebar-left-section {
    padding: .5rem 0 1rem
}

.sidebar-left-section.with-fake-delimiter {
    padding-top: 0 !important;
    box-shadow: none
}

.sidebar-left-section.with-fake-delimiter .gradient-delimiter {
    margin-bottom: .5rem
}

.sidebar-left-section.no-padding-top {
    padding-top: 0 !important
}

@media only screen and (max-width: 600px) {
    .sidebar-left-section {
        padding-bottom: .5rem
    }
}

@media only screen and (min-width: 601px) {
    .sidebar-left-section-content {
        margin: 0 .5rem
    }
}

.sidebar-left-section-content > .btn-primary {
    margin: 0
}

.sidebar-left-section-content > .checkbox-field .checkbox-box {
    inset-inline-start: auto
}

@media only screen and (max-width: 600px) {
    .sidebar-left-section-content > .checkbox-ripple, .sidebar-left-section-content > .btn-primary {
        border-radius: 0
    }
}

.sidebar-left-section-content.full-width {
    margin: 0 !important
}

.sidebar-left-section-content > .media-sticker-wrapper {
    width: 86px;
    height: 86px;
    margin: 1px auto 29px;
    flex: 0 0 auto;
    position: relative
}

.sidebar-left-section-name {
    padding: 1rem
}

@media only screen and (max-width: 600px) {
    .sidebar-left-section-name {
        padding: .5rem 1rem;
        font-size: .875rem
    }
}

.sidebar-left-section-caption {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--secondary-text-color);
    line-height: var(--line-height);
    padding: 0 1rem;
    word-break: break-word
}

@media only screen and (max-width: 600px) {
    .sidebar-left-section-caption {
        margin: .5rem;
        font-size: .875rem
    }
}

.sidebar-left-section .checkbox-field, .sidebar-left-section .radio-field {
    margin: 0
}

.sidebar-left-section .checkbox-field {
    display: flex;
    align-items: center;
    height: 3.5rem;
    padding: 0 1.125rem
}

.sidebar-left-section-disabled {
    pointer-events: none !important;
    opacity: .25
}

.sidebar-left-section .chatlist {
    padding: 0
}

.sidebar-left-h2 {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: var(--font-weight-bold)
}

#chats-archived-container, #contacts-container, .add-members-container, #search-private-container, #stickers-container, #poll-results-container, #search-gifs-container {
    background-color: var(--surface-color) !important
}

#chats-archived-container .stories-list {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0
}

#chats-archived-container .sidebar-content {
    transform: translateY(calc(92px - var(--stories-scrolled)))
}

body.animation-level-2 #chats-archived-container .sidebar-content {
    transition: transform var(--transition-standard-in)
}

.chat-folders-container .btn-control {
    margin-bottom: 1rem
}

.two-step-verification {
    background-color: var(--surface-color) !important
}

.two-step-verification .sidebar-left-section {
    box-shadow: none !important
}

.two-step-verification .sidebar-left-section-caption {
    text-align: center;
    max-width: 342px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.125rem
}

.two-step-verification-main .btn-primary + .btn-primary {
    margin-top: .125rem !important
}

.two-step-verification .btn-primary:not(.btn-transparent) {
    text-transform: uppercase
}

.two-step-verification .media-sticker-wrapper {
    width: 168px;
    height: 168px;
    margin: .625rem auto 1.1875rem
}

.two-step-verification-enter-password .media-sticker-wrapper {
    margin: 1.125rem auto 1.8125rem;
    width: 157px;
    height: 157px
}

.two-step-verification-hint .media-sticker-wrapper {
    width: 160px;
    height: 160px;
    margin: .5rem auto 2.25rem
}

.two-step-verification-email .media-sticker-wrapper {
    width: 160px;
    height: 160px;
    margin: .5625rem auto 2.1875rem
}

.two-step-verification-set .media-sticker-wrapper {
    width: 160px;
    height: 160px;
    margin: 1rem auto 1.3125rem
}

.two-step-verification-set .media-sticker-wrapper .rlottie, .two-step-verification-set .media-sticker-wrapper .rlottie-vector {
    inset-inline-start: .625rem
}

.privacy-tab form {
    padding-bottom: .0625rem
}

.active-sessions-container .row-title {
    font-weight: var(--font-weight-bold)
}

.active-sessions-container .row-title-right {
    font-size: var(--font-size-12);
    color: var(--secondary-text-color);
    line-height: var(--line-height-12)
}

.active-sessions-container .row-midtitle, .active-sessions-container .row-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.range-setting-selector {
    --option-width: 3px;
    --option-height: 10px;
    --background-color: var(--secondary-color);
    padding: 1rem .875rem
}

.range-setting-selector-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem
}

.range-setting-selector-name {
    color: var(--primary-text-color)
}

.range-setting-selector-value {
    color: var(--secondary-text-color)
}

.range-setting-selector-option {
    color: var(--secondary-text-color);
    font-size: var(--font-size-14);
    position: absolute;
    height: var(--option-height);
    width: var(--option-width);
    top: calc((var(--height) - var(--option-height)) / 2);
    background-color: var(--background-color);
    border-radius: 2px;
    z-index: 1;
    margin-left: calc(var(--option-width) / -2)
}

.range-setting-selector-option.active {
    background-color: var(--primary-color)
}

.range-setting-selector-option-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap;
    top: -1.875rem
}

.range-setting-selector-option.is-first .range-setting-selector-option-text {
    left: -2px;
    transform: unset
}

.range-setting-selector-option.is-last .range-setting-selector-option-text {
    left: unset;
    right: -2px;
    transform: unset
}

.range-setting-selector .progress-line {
    --height: 2px;
    --color: var(--primary-color);
    --border-radius: 4px;
    --thumb-size: 12px;
    background-color: var(--background-color)
}

.range-setting-selector .progress-line:before {
    content: none
}

.range-setting-selector .progress-line__filled {
    background-color: var(--primary-color)
}

.background-container .background-item:after {
    content: " ";
    display: block;
    position: absolute;
    inset: 0;
    border: 3px solid var(--primary-color);
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.background-container .background-item.active:after {
    opacity: 1
}

.background-container .background-item.active .grid-item-media {
    transform: scale(.91)
}

.background-container .background-item-media {
    transition: transform .2s ease-in-out;
    transform: scale(1)
}

.background-container .background .preloader-container {
    z-index: 1
}

.background-item {
    cursor: pointer
}

.background-item-media {
    border-radius: inherit
}

.background-item-media.is-pattern {
    background-color: #000;
    position: absolute;
    inset: 0
}

.background-item-media.is-pattern .media-photo {
    mix-blend-mode: soft-light
}

.background-item .media-photo {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.background-colors-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    border-radius: inherit
}

.empty-placeholder {
    top: 40%;
    transform: translateY(-50%);
    text-align: center;
    line-height: var(--line-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative
}

.empty-placeholder .media-sticker-wrapper {
    width: 128px;
    height: 128px;
    margin: 0 auto 1.9375rem;
    position: relative
}

.empty-placeholder-header {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold)
}

.empty-placeholder-subtitle {
    color: var(--secondary-text-color);
    font-size: .875rem;
    margin-top: .375rem
}

.empty-placeholder .btn-control {
    margin-top: 1.75rem;
    padding: 0 1.0625rem 0 .8125rem
}

.empty-placeholder .btn-control:before {
    margin-inline-end: .625rem
}

.empty-placeholder-dialogs {
    opacity: 0
}

body.animation-level-2 .empty-placeholder-dialogs {
    transition: opacity .2s ease-in-out
}

.empty-placeholder-dialogs-icon {
    margin-bottom: 1.0625rem
}

.empty-placeholder-dialogs.visible {
    opacity: 1
}

.is-forum-visible .can-have-forum .row-row, .is-forum-visible .can-have-forum .input-search, .is-forum-visible .can-have-forum .sidebar-header__title {
    opacity: 0
}

.is-forum-visible .folders-tabs-scrollable {
    opacity: var(--disabled-opacity);
    pointer-events: none
}

.is-forum-visible.backwards .can-have-forum .row-row, .is-forum-visible.backwards .can-have-forum .input-search, .is-forum-visible.backwards .can-have-forum .sidebar-header__title, .is-forum-visible.backwards .folders-tabs-scrollable {
    opacity: 1
}

.is-forum-visible.animating .can-have-forum .row-row, .is-forum-visible.animating .can-have-forum .input-search, .is-forum-visible.animating .can-have-forum .sidebar-header__title, .is-forum-visible.animating .folders-tabs-scrollable {
    transition: opacity var(--transition-standard-in)
}

.is-forum-visible.animating.backwards .can-have-forum .row-row, .is-forum-visible.animating.backwards .can-have-forum .input-search, .is-forum-visible.animating.backwards .can-have-forum .sidebar-header__title, .is-forum-visible.animating.backwards .folders-tabs-scrollable {
    transition: opacity var(--transition-standard-out)
}

.my-stories-container {
    background-color: var(--surface-color) !important
}

.my-stories-container .my-stories-placeholder {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.my-stories-container .sticker-container {
    width: 100px;
    height: 100px
}

.animations-icon-off {
    position: relative;
    --amount: 8.4%;
    --shift: 5.8%;
    --opposite: calc(100% - var(--amount));
    -webkit-clip-path: polygon(calc(var(--amount) - var(--shift)) 0, 100% 0%, 100% calc(var(--opposite) + var(--shift)), calc(var(--amount) - var(--shift)) 0, 0% 0%, 0 calc(var(--amount) + var(--shift)), calc(var(--opposite) - var(--shift)) 100%, 0% 100%, 0 0);
    clip-path: polygon(calc(var(--amount) - var(--shift)) 0, 100% 0%, 100% calc(var(--opposite) + var(--shift)), calc(var(--amount) - var(--shift)) 0, 0% 0%, 0 calc(var(--amount) + var(--shift)), calc(var(--opposite) - var(--shift)) 100%, 0% 100%, 0 0)
}

.animations-icon-off:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-47%, -111%) rotate(45deg);
    width: 115%;
    height: 8.4%;
    border-radius: 10px;
    background-color: currentColor
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 5px;
    z-index: 4;
    background-color: var(--primary-color);
    opacity: 0;
    transition: opacity .2s;
    cursor: col-resize;
    box-shadow: 0 0 1.5px .5px #fff
}

.night .sidebar-resize-handle {
    box-shadow: 0 0 0 .5px gray
}

html:has(.btn-menu.active) .sidebar-resize-handle, #column-left.is-collapsed.has-open-tabs .sidebar-resize-handle {
    display: none
}

@media only screen and (max-width: 925px) {
    .sidebar-resize-handle {
        display: none
    }
}

.sidebar-resize-handle:hover, .sidebar-resize-handle.is-active {
    opacity: 1
}

.sidebar-resize-handle:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff60
}

.night .sidebar-resize-handle:before {
    background-color: #00000040
}

.sidebar-resize-handle.is-active:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 32px;
    height: 100%
}

@media only screen and (min-width: 926px) {
    body.has-folders-sidebar .folders-tabs-scrollable, #column-left.is-collapsed .folders-tabs-scrollable {
        display: none !important
    }
}

.settings-slider-popup .popup-header {
    display: none
}

.settings-slider-popup .popup-container {
    padding: 0;
    max-width: 100%;
    width: 420px;
    border-radius: 16px
}

.settings-slider-popup .avatar-edit {
    width: 120px;
    height: 120px;
    margin: 1rem auto 2rem;
    flex: 0 0 auto
}

.settings-slider-popup__height-limit {
    height: 85vh
}

.settings-slider-popup__height-limit > div {
    height: 85vh
}

.sidebar-lock-button {
    margin-inline-start: 0 !important
}

.sidebar-lock-button-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem
}

#column-right {
    position: relative;
    overflow: unset
}

@media only screen and (min-width: 601px) and (max-width: 1275px) {
    #column-right {
        box-shadow: 0 .25rem .5rem .1rem #0003
    }
}

@media only screen and (max-width: 600px) {
    body:not(.is-right-column-shown) #column-right {
        transform: translate3d(100vw, 0, 0)
    }
}

@media only screen and (min-width: 601px) and (max-width: 925px) {
    body.is-right-column-shown:not(.is-left-column-shown) #column-right {
        transition: transform var(--transition-standard-in);
        transform: translateZ(0)
    }
}

@media only screen and (min-width: 926px) {
    body.is-right-column-shown #column-right {
        transition: transform var(--transition-standard-in);
        transform: translateZ(0)
    }
}

@media only screen and (min-width: 601px) {
    #column-right {
        width: calc(var(--right-column-width));
        transition: transform var(--transition-standard-out);
        position: absolute;
        inset-inline-end: 0;
        z-index: 3;
        transform: translate3d(calc(var(--right-column-width) * var(--reflect)), 0, 0)
    }

    #column-right .sidebar-content {
        min-width: var(--right-column-width);
        width: var(--right-column-width)
    }

    body.animation-level-0 #column-right {
        transition: none
    }
}

@media only screen and (min-width: 1276px) {
    #column-right {
        width: calc(var(--right-column-width) + 1px);
        transform: translate3d(calc((var(--right-column-width) + 1px) * var(--reflect)), 0, 0);
        border-inline-start: 1px solid var(--border-color)
    }
}

#column-right .sidebar-header {
    flex: 0 0 auto
}

#column-right #search-private-container .chatlist-container {
    position: relative;
    flex: 1 1 auto
}

#column-right .sidebar-search {
    display: none
}

#column-right .sidebar-search.active {
    display: flex
}

#column-right .input-wrapper {
    width: 100%;
    max-width: 100%;
    margin: .75rem 0;
    padding: 0 .75rem
}

.group-permissions-container .range-steps-selector {
    padding-inline: 1.1875rem
}

.shared-media-container .scrollable:not(.no-parallax) {
    perspective: 0px;
    perspective-origin: left top
}

.shared-media-container .scrollable:not(.no-parallax).parallax {
    perspective: 1px
}

.shared-media-container .profile-content.is-me .profile-name {
    margin-bottom: .9375rem
}

.shared-media-container .profile-content.is-me .profile-subtitle {
    display: none
}

.shared-media-container .profile-content .search-super {
    top: 100%
}

.shared-media-container .search-super {
    min-height: calc(var(--vh, 1vh) * 100 - 56px)
}

.shared-media-container .search-super-tabs {
    --padding-horizontal: 0
}

.shared-media-container .search-super-tabs .menu-horizontal-div-item {
    border-radius: 0 !important
}

.shared-media-container .sidebar-header .transition {
    flex-grow: 1
}

.shared-media-container .sidebar-header .transition .transition-item {
    display: flex;
    align-items: center
}

.shared-media-container .btn-corner {
    z-index: 2
}

@media only screen and (max-width: 600px) {
    .shared-media-container .btn-corner {
        width: 54px;
        height: 54px;
        bottom: 14px;
        inset-inline-end: 14px;
        position: fixed !important;
        z-index: 1
    }
}

.shared-media-container.can-add-members .btn-corner:not(.is-hidden) {
    transform: translateZ(0)
}

.search-super {
    width: 100%;
    max-width: 100%;
    position: absolute;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color)
}

.search-super .search-group__show-more {
    color: var(--primary-color);
    cursor: pointer;
    font-weight: 400
}

.search-super .search-super-month-name {
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 1.5rem 0;
    font-weight: var(--font-weight-bold);
    color: var(--secondary-text-color)
}

@media only screen and (max-width: 600px) {
    .search-super .search-super-month-name {
        padding: 1rem 1rem 0
    }
}

.search-super.sliding {
    max-height: none !important
}

.search-super-tabs {
    width: auto;
    flex: 1 1 auto
}

.search-super-tabs-scrollable {
    box-shadow: none !important;
    position: sticky !important;
    top: 0;
    z-index: 2;
    background-color: var(--surface-color)
}

.search-super-tabs-scrollable:before {
    position: absolute;
    width: 100%;
    height: 1px;
    inset-inline-start: 0;
    top: 0;
    background-color: inherit;
    display: block;
    content: " "
}

.search-super.is-full-viewport .search-super-tabs-scrollable:before {
    top: -1px
}

.search-super-tabs-scrollable:before, .search-super-tabs-scrollable:after {
    z-index: 0
}

.search-super-tabs-scrollable .scrollable {
    position: relative;
    display: flex
}

.search-super-tabs-scrollable.is-single {
    order: 1;
    top: auto;
    bottom: 0;
    transform: translateY(calc(var(--scrollable-size) * -1));
    height: 0;
    opacity: 0
}

body.animation-level-2 .search-super-tabs-scrollable.is-single {
    transition: opacity var(--transition-standard-in)
}

.search-super-tabs-scrollable.is-single:before {
    top: -1px;
    background-color: var(--border-color)
}

.search-super-tabs-scrollable.is-single:after {
    display: none
}

.search-super-tabs-scrollable.is-single .search-super-nav-scrollable {
    opacity: 0 !important
}

.search-super-tabs-scrollable.is-single .search-super-selection-container {
    opacity: 1 !important
}

.search-super-tabs-scrollable.is-single.is-selecting:not(.backwards) {
    opacity: 1
}

.search-super-tab-container {
    position: relative;
    min-height: 150px;
    background-color: var(--surface-color) !important
}

.search-super-content-container {
    transform: translateY(0);
    min-height: calc(100vh - 111px)
}

.search-super-tabs-container {
    min-height: calc(100% - 49px);
    grid-template-rows:100%;
    flex: 1 1 auto
}

.search-super-tabs-container .preloader {
    padding: 0;
    position: absolute !important;
    top: 100px;
    transform: translate(-50%)
}

.search-super-tabs-container .preloader > svg {
    height: 50px;
    width: 50px
}

.search-super-month:first-of-type .search-super-month-name {
    display: none
}

.search-super .document-name, .search-super .audio-title, .search-super .title {
    display: flex;
    justify-content: space-between
}

.search-super .sent-time {
    flex: 0 0 auto;
    margin-inline-start: 8px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--secondary-text-color)
}

.search-super-content-media .search-super-month-name {
    border: none;
    padding: 9px 0 7px 24px
}

.search-super-content-media .grid-item {
    overflow: hidden
}

.search-super .video-time {
    position: absolute;
    inset-inline-start: 5px;
    top: 4px;
    height: 18px;
    border-radius: 4px;
    background-color: var(--message-time-background);
    padding: 0 6px 0 5px;
    z-index: 2;
    font-size: 12px;
    color: #fff;
    line-height: 18px
}

.search-super-content-media .checkbox-field, .search-super-content-stories .checkbox-field {
    inset-inline-end: .25rem;
    top: .25rem
}

.search-super .checkbox-box {
    box-shadow: 0 0 3px #0006
}

.search-super .checkbox-box-border {
    border-color: #fff;
    z-index: 1 !important
}

.search-super .checkbox-box-background {
    background-color: var(--green-color)
}

.search-super .checkbox-field {
    position: absolute !important;
    z-index: 2;
    margin: 0
}

.search-super-content-media .search-super-month-items {
    width: 100%;
    padding-top: 1px;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: 1px
}

.search-super-content-files .search-super-month-items {
    padding: 8px 24px 16px 20px
}

@media only screen and (max-width: 600px) {
    .search-super-content-files .search-super-month-items {
        padding: 8px 16px 8px 12px
    }
}

.search-super-content-files .document {
    --icon-size: 3rem;
    --icon-margin: .75rem;
    height: calc(48px + 1.5rem)
}

.search-super-content-files .document-ico, .search-super-content-files .document-download {
    border-radius: 5px !important
}

.search-super-content-files .document-name {
    font-weight: 400;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.search-super-content-links .search-super-item {
    display: flex;
    flex-direction: column;
    padding-inline-start: 4.4375rem;
    position: relative;
    overflow: hidden;
    min-height: 4.375rem;
    cursor: pointer;
    justify-content: flex-start
}

.search-super-content-links .row-media {
    height: 3rem;
    width: 3rem;
    border-radius: .375rem;
    overflow: hidden;
    position: absolute;
    inset-inline-start: .6875rem
}

.search-super-content-links .row-media.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    background-color: var(--primary-color)
}

.search-super-content-links .media-photo {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.search-super-content-links .row-title {
    margin-top: .1875rem
}

.search-super-content-links .row-subtitle {
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    word-break: break-word
}

.search-super-content-links .sent-time {
    margin: 1px 0 0
}

.search-super-content-links .sender-title {
    display: block;
    margin-top: .25rem
}

.search-super-content-links .checkbox-field {
    padding: 0 !important;
    margin: 2rem 0 0 -1.75rem !important;
    --offset-left: 0 !important
}

@media only screen and (min-width: 601px) {
    .search-super-content-links .search-super-month-items {
        margin: .5625rem
    }
}

@media only screen and (max-width: 600px) {
    .search-super-content-links .search-super-month-name {
        padding: .875rem 1rem
    }
}

.search-super-content-music .search-super-month-items, .search-super-content-voice .search-super-month-items {
    padding: 20px 15px 0 20px
}

@media only screen and (max-width: 600px) {
    .search-super-content-music .search-super-month-items, .search-super-content-voice .search-super-month-items {
        padding: 20px 15px 0 12px
    }
}

.search-super-content-music .audio, .search-super-content-voice .audio {
    justify-content: unset;
    margin-bottom: 1.5rem
}

@media only screen and (min-width: 601px) {
    .search-super-content-music .audio, .search-super-content-voice .audio {
        max-width: 377px
    }
}

.search-super-content-music .audio.audio-show-progress .audio-subtitle, .search-super-content-voice .audio.audio-show-progress .audio-subtitle {
    overflow: visible
}

.search-super-content-members .chatlist, .search-super-content-groups .chatlist {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.search-super-content-stories .grid {
    grid-gap: 1px
}

.search-super-content-stories .grid-item {
    padding-bottom: 136.36363636%
}

.search-super-content-stories .grid.one {
    grid-template-columns:repeat(1, 1fr)
}

.search-super-content-stories .grid.one .grid-item {
    padding-bottom: 100%;
    display: flex;
    justify-content: center
}

.search-super-content-stories .grid.one .grid-item-media {
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
    inset-inline: auto auto
}

.search-super-content-stories .grid.two {
    grid-template-columns:repeat(2, 1fr)
}

.search-super-content-similar, .search-super-content-savedDialogs, .search-super-content-saved {
    padding: .5rem 0
}

.search-super-content-saved .checkbox-field {
    --offset-left: 1.5rem !important;
    margin-top: 2.25rem !important
}

.search-super-tabs-scrollable .search-super-nav-scrollable {
    opacity: 1;
    height: var(--scrollable-size);
    max-height: var(--scrollable-size)
}

body.animation-level-2 .search-super-tabs-scrollable .search-super-nav-scrollable, body.animation-level-2 .search-super-tabs-scrollable .search-super-selection-container {
    transition: opacity .2s ease-in-out
}

.search-super-tabs-scrollable.is-selecting:not(.backwards) .search-super-nav-scrollable {
    opacity: 0
}

.search-super-tabs-scrollable.is-selecting:not(.backwards) .search-super-selection-container {
    opacity: 1
}

.search-super.is-selecting .anchor-url {
    pointer-events: none
}

.search-super-selection-container {
    background-color: inherit;
    position: absolute;
    height: var(--scrollable-size);
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    opacity: 0
}

.search-super-selection-container .btn-icon + .btn-icon {
    margin-inline-start: .5rem
}

@media only screen and (max-width: 600px) {
    .search-super-selection-container {
        padding: 0 .5rem
    }
}

.search-super-selection-count {
    flex-grow: 1;
    font-weight: var(--font-weight-bold);
    color: var(--primary-text-color);
    white-space: nowrap;
    margin-inline-start: 1.5rem
}

#search-container .search-super-content-music .audio:not(.audio-show-progress) .audio-time, #search-container .search-super-content-music .audio:not(.audio-show-progress) .audio-description:before {
    display: none
}

#search-container .search-group.is-short .chatlist-chat:nth-child(n+4) {
    display: none
}

#search-container .search-group.is-short-5 .chatlist-chat:nth-child(n+6) {
    display: none
}

#stickers-container .sticker-sets {
    display: flex;
    flex-direction: column;
    margin-top: 16px
}

#stickers-container .sticker-set {
    display: flex;
    flex-direction: column;
    height: 140px;
    cursor: pointer
}

#stickers-container .sticker-set-name {
    font-weight: var(--font-weight-bold)
}

#stickers-container .sticker-set-count {
    font-size: 14px;
    color: var(--secondary-text-color)
}

#stickers-container .sticker-set-header {
    display: flex;
    padding-left: 16px;
    padding-bottom: 12px;
    justify-content: space-between
}

#stickers-container .sticker-set-button {
    height: 30px;
    padding-left: 12px;
    padding-right: 13px;
    margin-right: 16px;
    font-size: 15px;
    border-radius: 16px;
    font-weight: 400;
    width: auto;
    transition: width .2s
}

#stickers-container .sticker-set-button.gray {
    background: #f1f3f4;
    color: var(--secondary-text-color)
}

#stickers-container .sticker-set-stickers {
    display: flex;
    justify-content: space-around
}

#stickers-container .sticker-set-sticker {
    width: 68px;
    height: 68px;
    position: relative
}

#stickers-container .sticker-set-sticker:hover {
    border-radius: 12px;
    background-color: var(--light-secondary-text-color)
}

#stickers-container .sticker-set-sticker img {
    max-width: 100%;
    max-height: 100%
}

#poll-results-container .poll-results {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%
}

#poll-results-container .poll-results-answer {
    color: var(--secondary-text-color);
    padding: 0 16px 8px;
    margin: 0;
    font-weight: var(--font-weight-bold);
    justify-content: space-between;
    display: flex;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media only screen and (min-width: 601px) {
    #poll-results-container .poll-results-answer {
        padding: 0 24px 8px
    }
}

#poll-results-container .poll-results-more {
    margin: 0 .5rem;
    width: auto
}

@media only screen and (max-width: 600px) {
    #poll-results-container .poll-results-more {
        margin: 0;
        border-radius: 0
    }
}

#poll-results-container .poll-results h3 {
    padding: 0 16px;
    margin-top: 15px;
    font-size: 20px;
    margin-bottom: 16px
}

@media only screen and (min-width: 601px) {
    #poll-results-container .poll-results h3 {
        padding: 0 24px
    }
}

#poll-results-container .poll-results hr {
    margin-bottom: 15px;
    margin-top: 7px;
    display: block !important
}

.edit-peer-container .input-wrapper {
    margin-bottom: .5625rem !important
}

.edit-peer-container .sidebar-left-section {
    padding: 0 0 .5rem
}

.edit-peer-container .chatlist-new {
    padding: 0
}

.chat-requests-container .chatlist-chat.no-wrap {
    min-height: 5.75rem;
    padding-bottom: 2.25rem !important
}

.chat-requests-container .chatlist-chat.no-wrap .chatlist-chat-buttons {
    position: absolute;
    bottom: .5rem;
    display: flex
}

.chat-requests-container .chatlist-chat.no-wrap .btn-control-small {
    margin-inline-end: .5rem
}

.edit-contact-container .input-wrapper {
    margin-top: 1.8125rem !important
}

.edit-contact-container .avatar-placeholder {
    filter: none !important
}

.edit-contact-container .avatar-edit {
    margin-bottom: 1.375rem !important
}

.edit-contact-container .profile-name {
    font-size: 1.5rem;
    line-height: var(--line-height)
}

.group-type-container .sidebar-left-section-caption {
    font-size: .875rem;
    margin-top: .8125rem
}

.group-type-container .input-wrapper {
    margin-top: .875rem !important
}

.chat-discussion-container .sticker-container {
    width: 120px;
    height: 120px;
    margin-top: 1rem
}

.chat-discussion-container .caption {
    margin-bottom: 1rem
}

.statistics-container .sidebar-left-section-name {
    color: var(--primary-text-color);
    margin: 0 -.5rem
}

.statistics-container .sidebar-left-section-name-right {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    align-self: center
}

.statistics-overview {
    display: grid;
    grid-template-columns:1fr 1fr;
    row-gap: 1.125rem;
    padding: 0 1rem;
    margin: .5rem -.5rem
}

.statistics-overview-item {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 4px;
    overflow: hidden;
    min-height: 2.5rem
}

.statistics-overview-item-value {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold)
}

.statistics-overview-item-value-description {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-normal);
    color: var(--secondary-text-color)
}

.statistics-overview-item-value-description.red {
    color: var(--danger-color)
}

.statistics-overview-item-value-description.green {
    color: #4fae4e
}

.statistics-overview-item-name {
    font-size: var(--font-size-14);
    color: var(--secondary-text-color);
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.statistics-chart {
    margin: 0 -.5rem
}

.statistics-post-title {
    font-weight: var(--font-weight-bold)
}

.statistics-post-media {
    border-radius: 8px
}

.statistics-post-media .media-photo {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.statistics-post-counter {
    display: flex;
    align-items: center;
    gap: .125rem
}

.statistics-post-counter-icon {
    font-size: var(--font-size-16)
}

.statistics-post-story .statistics-post-media {
    border-radius: 50%;
    padding: .125rem
}

.statistics-post-story .media-container {
    width: 100%;
    height: 100%;
    position: relative;
    border: 2px solid var(--surface-color)
}

.statistics-post-story .avatar-stories-simple {
    --offset: 0px
}

.statistics-post .media-container, .statistics-post .media-photo {
    border-radius: inherit
}

.statistics-post .row-title-right {
    font-size: var(--font-size-14)
}

.statistics-post .row-subtitle-right {
    display: flex;
    align-items: center;
    gap: .5rem
}

.boosts-container .limit-line-container {
    margin-bottom: 1.75rem
}

.boosts-container .statistics-overview-item-value {
    font-size: var(--font-size-20)
}

.boosts-container .statistics-overview-item-value-description {
    font-size: var(--font-size-14)
}

.boosts-users-container .sidebar-left-section {
    padding: 0 !important
}

.boosts-users-container .sidebar-left-section-content {
    margin: 0 !important
}

.boosts-users-tabs {
    justify-content: flex-start;
    padding: 0
}

.boosts-users-tab {
    flex: 0 0 auto;
    border-radius: 0 !important
}

.boosts-users-content {
    min-height: 3rem;
    padding: .5rem
}

@media only screen and (max-width: 600px) {
    .boosts-users-content {
        padding-inline: 0
    }
}

.boosts-users-content.is-empty {
    display: flex;
    align-items: center;
    justify-content: center
}

.boosts-user-title {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-bold)
}

.boosts-user-badge {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), .2);
    padding-inline: .25rem .5rem;
    height: 1.25rem;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    margin-inline-start: .375rem;
    border-radius: 1.5rem;
    flex: 0 0 auto;
    position: relative
}

.boosts-user-badge-right {
    height: 1.5rem;
    padding-inline: .5rem .75rem;
    gap: .25rem
}

.boosts-user-badge-right.is-gift {
    color: #d08a31;
    background-color: #d08a3133
}

.boosts-user-boosts {
    color: #fff;
    background-color: var(--premium-color)
}

.boosts-user-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.boosts-no-boosters {
    color: var(--secondary-text-color);
    font-size: var(--font-size-14);
    text-align: center
}

.media-viewer {
    position: fixed;
    inset: 0;
    background: #000000e0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width: 600px) {
    .media-viewer {
        background: #000
    }
}

.media-viewer-author {
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center
}

@media only screen and (max-width: 600px) {
    .media-viewer-author {
        margin-inline-start: 1.5rem
    }
}

.media-viewer-userpic {
    margin-inline-end: 1rem
}

@media only screen and (max-width: 600px) {
    .media-viewer-userpic {
        display: none
    }
}

.media-viewer-name {
    line-height: var(--line-height);
    font-weight: var(--font-weight-bold);
    margin: .0625rem 0
}

@media only screen and (min-width: 601px) {
    .media-viewer-name {
        margin: .0625rem 0 .125rem
    }
}

.media-viewer-date {
    line-height: var(--line-height);
    font-size: .875rem
}

.media-viewer-buttons {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    flex-flow: row nowrap;
    padding: .5rem .75rem;
    gap: .25rem
}

.media-viewer-buttons .btn-icon {
    transition: var(--open-duration)
}

html.no-touch .media-viewer-buttons .btn-icon:hover, html.no-touch .media-viewer-buttons .btn-icon:active {
    color: #fff
}

@media only screen and (max-width: 600px) {
    .media-viewer-buttons {
        display: none
    }
}

.media-viewer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden
}

.media-viewer-container {
    align-self: center;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    align-items: center
}

.media-viewer-media {
    visibility: hidden
}

.media-viewer-caption {
    --link-color: #60a5e9 !important;
    position: absolute;
    text-align: center;
    color: #fff;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 4;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem .5rem 0;
    opacity: 0;
    line-height: var(--line-height);
    white-space: pre-wrap;
    background-color: transparent;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

body.animation-level-2 .media-viewer-caption {
    transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration) ease-in-out
}

.media-viewer-caption .scrollable {
    padding: .5rem .875rem;
    max-height: 6rem;
    max-width: 50rem;
    height: 6rem;
    position: relative;
    margin: 0 auto
}

html.no-touch .media-viewer-whole.active .media-viewer-caption {
    opacity: .4
}

html.no-touch .media-viewer-whole.active .media-viewer-caption:hover {
    opacity: 1
}

html.is-touch .media-viewer-whole.active .media-viewer-caption {
    opacity: .6
}

@media only screen and (max-width: 600px) {
    .media-viewer-caption {
        width: 100%;
        transform: translateZ(0);
        text-align: unset;
        bottom: 1.0625rem
    }

    .media-viewer-caption .scrollable {
        padding: 0 .5rem;
        height: auto
    }

    .media-viewer-whole.has-video-controls .media-viewer-caption {
        transform: translate3d(0, -69px, 0)
    }

    .media-viewer-whole.backwards .media-viewer-caption {
        visibility: hidden
    }

    html.no-touch .media-viewer-caption:hover, html.no-touch .media-viewer-caption:active {
        background-color: #000;
        opacity: 1 !important
    }
}

.media-viewer-caption.is-focused {
    background-color: #000;
    opacity: 1 !important
}

.media-viewer-caption.has-button .scrollable-y {
    height: auto
}

.media-viewer-caption-button {
    width: 20rem;
    height: 3rem;
    background-color: #fff3;
    color: #fff;
    margin-bottom: 2rem
}

html.no-touch .media-viewer-caption-button:hover, html.no-touch .media-viewer-caption-button:active {
    background-color: #fff6
}

.media-viewer-switcher {
    --offset-top: 7.5rem;
    position: absolute;
    left: 0;
    top: 3.75rem;
    width: 7rem;
    height: calc(100% - var(--offset-top));
    cursor: pointer
}

html.no-touch .media-viewer-switcher {
    --offset-top: 3.75rem
}

html.no-touch .media-viewer-switcher:hover .media-viewer-sibling-button {
    opacity: 1
}

@media only screen and (max-width: 600px) {
    .media-viewer-switcher {
        width: 4rem
    }
}

.media-viewer-switcher-right {
    left: auto;
    right: 0
}

.media-viewer-prev-button, .media-viewer-next-button {
    cursor: pointer;
    position: absolute;
    color: #fff;
    font-size: 2rem;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: var(--open-duration) opacity;
    z-index: 5;
    margin-top: calc(var(--offset-top) / -2)
}

@media only screen and (min-width: 601px) {
    .media-viewer-prev-button, .media-viewer-next-button {
        font-size: 3rem;
        left: 2rem
    }
}

.media-viewer-next-button {
    left: auto;
    right: 1rem;
    transform: translateY(-50%)
}

@media only screen and (min-width: 601px) {
    .media-viewer-next-button {
        right: 2rem
    }
}

.media-viewer-mover {
    position: fixed !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto !important;
    left: 0;
    top: 0;
    transform-origin: top left;
    overflow: hidden;
    transform: translateZ(0) scaleZ(1);
    border-radius: 0
}

.media-viewer-mover:not(.center) {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
}

@media only screen and (max-width: 600px) {
    .media-viewer-mover {
        overflow: visible
    }
}

.media-viewer-mover .ckin__player {
    position: absolute;
    inset: 0
}

.media-viewer-mover img, .media-viewer-mover video, .media-viewer-mover .canvas-thumbnail {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1;
    transition: opacity var(--transition-standard-in);
    position: absolute
}

.media-viewer-mover .thumbnail-avatar {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 1;
    transition: opacity var(--transition-standard-in)
}

.media-viewer-mover .canvas-thumbnail.hide-thumbnail, .media-viewer-mover .thumbnail-avatar.hide-thumbnail {
    opacity: 0;
    transition: opacity var(--transition-standard-out)
}

.media-viewer-mover.active, .media-viewer-mover.active.opening {
    transition: transform var(--open-duration), border-radius var(--open-duration), opacity var(--open-duration)
}

.media-viewer-mover.moving {
    transition: transform var(--move-duration) ease
}

.media-viewer-mover.no-transition {
    transition: none !important
}

.media-viewer-mover.center {
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%, -50%, 0) !important;
    max-width: 100vw;
    max-height: calc(var(--vh, 1vh) * 100 - var(--padding-vertical))
}

@media only screen and (max-width: 600px) {
    .media-viewer-mover.center {
        --padding-vertical: 7.5rem;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important
    }

    .media-viewer-mover.center .ckin__player:not(.ckin__fullscreen) .default__controls {
        bottom: -62px
    }
}

.media-viewer-mover.center img:not(.thumbnail), .media-viewer-mover.center video, .media-viewer-mover.center .canvas-thumbnail {
    -o-object-fit: contain;
    object-fit: contain
}

.media-viewer-mover.center img.thumbnail {
    width: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.media-viewer-mover.in-pip img, .media-viewer-mover.in-pip video, .media-viewer-mover.in-pip .canvas-thumbnail, .media-viewer-mover.in-pip .thumbnail-avatar {
    opacity: 0
}

.media-viewer-appear {
    opacity: 0;
    visibility: hidden
}

body.animation-level-2 .media-viewer-appear {
    transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration)
}

.media-viewer-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
    padding: 0 1.25rem
}

.media-viewer-topbar .btn-icon, .media-viewer-topbar .media-viewer-author {
    color: #fff;
    opacity: .4
}

body.animation-level-2 .media-viewer-topbar .btn-icon, body.animation-level-2 .media-viewer-topbar .media-viewer-author {
    transition: opacity var(--open-duration) ease-in-out, color var(--open-duration) ease-in-out, background-color var(--open-duration) ease-in-out
}

html.no-touch .media-viewer-topbar .btn-icon:hover, html.no-touch .media-viewer-topbar .btn-icon:active, html.no-touch .media-viewer-topbar .media-viewer-author:hover, html.no-touch .media-viewer-topbar .media-viewer-author:active {
    opacity: 1
}

.media-viewer-topbar-left {
    display: flex;
    align-items: center
}

@media only screen and (max-width: 600px) {
    .media-viewer-topbar {
        padding: 0 .5rem
    }
}

.media-viewer-aspecter {
    width: 100%;
    height: 100%;
    transform: scaleZ(1);
    position: absolute;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.media-viewer-mover.active .media-viewer-aspecter {
    transition: width var(--open-duration), height var(--open-duration), transform var(--open-duration), border-radius var(--open-duration)
}

.media-viewer-whole {
    --open-duration: .2s;
    --move-duration: .35s;
    --padding-vertical: 15rem;
    inset: 0;
    position: fixed !important;
    display: block;
    z-index: 4;
    visibility: hidden;
    transition: visibility 0s var(--open-duration)
}

body.animation-level-0 .media-viewer-whole {
    --open-duration: 0s;
    --move-duration: 0s
}

.media-viewer-whole.active {
    visibility: visible;
    transition-delay: 0s
}

.media-viewer-whole.active .overlays, .media-viewer-whole.active .media-viewer-appear {
    opacity: 1;
    visibility: visible
}

body.animation-level-2 .media-viewer-whole.active .overlays, body.animation-level-2 .media-viewer-whole.active .media-viewer-appear {
    transition: opacity var(--open-duration) 0s, visibility 0s 0s
}

.media-viewer-whole.active .media-viewer-caption {
    visibility: visible
}

@media only screen and (max-width: 600px) {
    .media-viewer-whole .btn-menu-toggle:not(.playback-rate) {
        color: #fff6;
        opacity: 1
    }

    .media-viewer-whole .btn-menu-toggle:not(.playback-rate).menu-open {
        color: #fff;
        background-color: #70757933 !important
    }

    .media-viewer-whole.hide-caption .media-viewer-caption {
        opacity: 0 !important;
        pointer-events: none
    }
}

.media-viewer-whole.is-zooming .media-viewer-caption, .media-viewer-whole.is-zooming .media-viewer-switcher .media-viewer-sibling-button {
    opacity: 0 !important;
    pointer-events: none
}

.media-viewer-whole.highlight-switchers .media-viewer-sibling-button {
    opacity: 1
}

.media-viewer-whole.no-forwards img, .media-viewer-whole.no-forwards .canvas-thumbnail, .media-viewer-whole.no-forwards .thumbnail-avatar {
    pointer-events: none
}

.media-viewer-whole.no-forwards .media-viewer-caption {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.media-viewer-movers {
    position: absolute;
    inset: 0;
    z-index: 4;
    transform: translate3d(1, 1, 0) scale(1);
    will-change: transform;
    transform-origin: 0 0
}

body.animation-level-2 .media-viewer-movers {
    transition: transform var(--open-duration)
}

.zoom-container {
    width: 17.125rem;
    height: 3.375rem;
    background-color: #0006;
    border-radius: 12px;
    padding: .5rem;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translate(-50%);
    z-index: 5
}

body.animation-level-2 .zoom-container {
    transition: opacity var(--open-duration)
}

.zoom-container .btn-icon {
    color: #fff
}

.zoom-container .btn-icon.inactive {
    pointer-events: none;
    opacity: .4
}

.zoom-container .progress-line {
    --color: #fff;
    --height: 2px;
    flex: 1 1 auto;
    margin: 0 1px
}

.zoom-container .progress-line:before {
    opacity: 1
}

.zoom-container:not(.is-visible), .media-viewer-whole:not(.active) .zoom-container {
    opacity: 0;
    pointer-events: none
}

.zoom-container.is-visible {
    opacity: 1
}

.zoom-container.is-visible ~ .media-viewer-caption {
    opacity: 0 !important;
    pointer-events: none
}

.zoom-container.is-visible ~ .media-viewer-movers .default__button--big {
    opacity: 0 !important
}

.overlays {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed !important;
    background-color: #0003;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--open-duration) 0s, visibility 0s var(--open-duration)
}

.media-viewer-whole.live {
    --padding-vertical: 7.5rem
}

.media-viewer-whole.live .media-viewer-topbar {
    padding: 0 .75rem
}

.media-viewer-whole.live .media-viewer-userpic {
    margin-right: 1.125rem;
    --size: 42px
}

.media-viewer-whole.live .media-viewer-topbar .btn-icon, .media-viewer-whole.live .media-viewer-topbar .media-viewer-author {
    opacity: 1
}

.media-viewer-whole.live .media-viewer-author-right {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.media-viewer-whole.live .media-viewer-name {
    margin: 0
}

.media-viewer-whole.live .media-viewer-date {
    color: #ffffff80;
    line-height: 20px
}

.media-viewer-whole.live .media-viewer-buttons {
    padding: .5rem
}

.media-viewer-whole.live .thumbnail-avatar {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: inherit !important;
    pointer-events: none
}

.media-viewer-whole.live .thumbnail-avatar img {
    -o-object-fit: cover;
    object-fit: cover
}

.media-viewer-whole.live .canvas-thumbnail {
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    border-radius: inherit;
    pointer-events: none
}

.checkable-button-menu .btn-menu-item {
    padding-left: 8px
}

.checkable-button-menu .btn-menu-item-icon {
    margin-right: 12px
}

.playback-rate-button-menu .btn-menu {
    min-width: 140px
}

.playback-speed-icon-floating {
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px
}

.geometric-font-icon {
    display: inline-flex;
    justify-content: center
}

.geometric-font-icon--0, .geometric-font-icon--2, .geometric-font-icon--3, .geometric-font-icon--5, .geometric-font-icon--6, .geometric-font-icon--8, .geometric-font-icon--9, .geometric-font-icon--x {
    width: .75em
}

.geometric-font-icon--1 {
    width: .5em
}

.geometric-font-icon--4, .geometric-font-icon--7 {
    width: .6666666667em
}

.geometric-font-icon--dot {
    width: .1666666667em
}

.speed-drag-handler__speed {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 16px;
    transform: translate(-50%);
    padding: 0 11px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #0006;
    height: 30px
}

.speed-drag-handler__speed-number {
    display: inline-flex;
    height: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 12px;
    padding-left: 1px
}

.speed-drag-handler__speed-arrows {
    display: flex;
    gap: 1px
}

.speed-drag-handler__speed-arrow-right {
    height: 12px;
    animation: speed-drag-handler-arrow-right-animation 1s infinite;
    animation-duration: calc(2s / var(--animation-duration-multiplier, 1))
}

.speed-drag-handler__speed-arrow-right-last {
    animation-delay: .25s
}

.speed-drag-handler__speed-tip {
    position: absolute;
    left: var(--left);
    top: var(--top);
    transform: translate(calc(-50% + 4px), -6px);
    padding: 4px 14px;
    width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    color: #fff
}

.speed-drag-handler__speed-tip--visible {
    opacity: .7
}

.speed-drag-handler__speed-tip-arrows {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 16px
}

.speed-drag-handler__speed-tip-description {
    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    text-align: center
}

@keyframes speed-drag-handler-arrow-right-animation {
    0% {
        opacity: .7
    }
    60% {
        opacity: .7
    }
    80% {
        opacity: 1
    }
    to {
        opacity: .7
    }
}

.quality-download-options-button-menu .btn-menu {
    min-width: 200px
}

.quality-levels-switch-button__hd-icon {
    position: absolute;
    right: 4px;
    top: 8px;
    display: none
}

.quality-levels-switch-button--is-hd .quality-levels-switch-button__hd-icon {
    display: initial
}

.progress-line:has(.media-progress-line__filled-container) {
    background: none
}

.progress-line:has(.media-progress-line__filled-container):before {
    display: none
}

.media-progress-line__filled-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff26
}

.media-progress-line__filled-container .progress-line__filled:after {
    display: none
}

.media-progress-line__thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--progress) * 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--primary-color);
    width: 5px;
    height: 5px;
    opacity: 0;
    transition: width .1s, height .1s, opacity .12s;
    pointer-events: none
}

.media-progress-line__thumb:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 17px;
    height: 17px
}

input:active + .media-progress-line__thumb, input:hover + .media-progress-line__thumb {
    opacity: 1;
    width: 17px;
    height: 17px
}

.media-progress-line__current-time-info {
    position: absolute;
    left: var(--current-time-info-x);
    bottom: 100%;
    transform: translate(-50%);
    padding: 12px 0;
    width: -moz-max-content;
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    font-weight: 400;
    display: none;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0, 0, 0, .6)
}

.media-progress-line:hover .media-progress-line__current-time-info {
    display: flex
}

.media-progress-line-clip-path-svg rect {
    height: 3px;
    y: 1px
}

.media-progress-line-clip-path-svg rect[data-active=true] {
    height: 5px;
    y: 0px
}

html.overlay-scroll .scrollable::-webkit-scrollbar {
    width: 0;
    height: 0;
    opacity: 0;
    width: .375rem
}

html.overlay-scroll .scrollable::-webkit-scrollbar-thumb {
    width: 0;
    height: 0
}

html.overlay-scroll .scrollable::-webkit-scrollbar-thumb {
    opacity: 0;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

html.overlay-scroll .scrollable::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none
}

html.overlay-scroll .scrollable::-webkit-scrollbar-corner {
    background-color: transparent
}

html.overlay-scroll .scrollable:hover {
    scrollbar-color: var(--scrollbar-color) rgba(0, 0, 0, 0)
}

html.overlay-scroll .scrollable:hover::-webkit-scrollbar {
    opacity: 1
}

html.overlay-scroll .scrollable:hover::-webkit-scrollbar-thumb {
    min-height: 5rem;
    max-height: 12.5rem;
    border-radius: 10px;
    background-color: var(--scrollbar-color);
    opacity: 1
}

html.custom-scroll .scrollable::-webkit-scrollbar {
    width: 0;
    height: 0
}

html.custom-scroll .scrollable:hover .scrollable-thumb, html.custom-scroll .scrollable-thumb.is-focused {
    opacity: 1
}

.scrollable-x::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar {
    display: none
}

.scrollable {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    max-height: 100%;
    position: absolute;
    inset: 0;
    -webkit-overflow-scrolling: touch
}

.scrollable.scrollable-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.scrollable.scrollable-y {
    overflow-y: auto;
    overflow-y: overlay;
    scrollbar-width: none
}

.is-firefox .scrollable.scrollable-y {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.scrollable.scrollable-y.scrollable-y-bordered {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent
}

body.animation-level-2 .scrollable.scrollable-y.scrollable-y-bordered {
    transition: border-top-color var(--transition-standard-in), border-bottom-color var(--transition-standard-in)
}

.scrollable.scrollable-y.scrollable-y-bordered:not(.scrolled-start) {
    border-top-color: var(--border-color)
}

.scrollable.scrollable-y.scrollable-y-bordered:not(.scrolled-end) {
    border-bottom-color: var(--border-color)
}

.scrollable-thumb {
    position: absolute;
    inset-inline-end: 1px;
    width: 5px;
    background-color: var(--scrollbar-color);
    cursor: default;
    opacity: 0;
    border-radius: 8px
}

body.animation-level-2 .scrollable-thumb {
    transition: opacity .1s ease-in-out
}

.scrollable-thumb-container {
    position: sticky;
    top: 0;
    z-index: 5
}

.emoji-dropdown {
    --width: 23.875rem;
    --height: 26.25rem;
    display: flex;
    flex-direction: column;
    width: var(--width);
    height: var(--height);
    background: var(--surface-color);
    overflow: hidden;
    flex: 1 1 auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: absolute;
    inset-inline-start: .8125rem;
    bottom: 5.125rem;
    max-width: calc(100% - 1rem);
    max-height: 26.25rem;
    box-shadow: 0 5px 10px 5px #10232f24;
    z-index: 4;
    border-radius: 1.25rem;
    transition: transform var(--esg-transition), opacity var(--esg-transition);
    transform: scale(0);
    opacity: 0;
    transform-origin: 0 100%;
    -webkit-backdrop-filter: var(--menu-backdrop-filter);
    backdrop-filter: var(--menu-backdrop-filter);
    background-color: var(--menu-background-color)
}

body.animation-level-0 .emoji-dropdown {
    transition: none
}

.is-rtl .emoji-dropdown {
    transform-origin: 100% 100%
}

.emoji-dropdown.smaller {
    --height: 20rem;
    max-height: 20rem
}

.emoji-dropdown.is-standalone {
    transform-origin: calc(9rem * var(--reflect)) 4.625rem !important;
    transform: scale(.85);
    bottom: auto;
    inset-inline-start: auto;
    top: min(100vh - var(--height) - .5rem, var(--top));
    left: min(100vw - var(--width) - .5rem, max(.5rem, var(--left)))
}

.emoji-dropdown.is-under {
    --width: 100%;
    --height: min(282px, calc(var(--vh) * 100 - 135px));
    position: relative;
    transform: none;
    inset: unset;
    border-radius: unset;
    max-width: 100%;
    max-height: 100%
}

.emoji-dropdown.active {
    opacity: 1;
    transform: scale(1)
}

.emoji-dropdown.shrink .emoticons-content .scrollable-y {
    position: relative
}

.emoji-dropdown .emoji-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 100%
}

.emoji-dropdown .emoji-tabs {
    justify-content: center;
    border: none;
    border-top: 1px solid var(--border-color)
}

.emoji-dropdown .emoji-tabs:after {
    content: none
}

.emoji-dropdown .emoji-tabs-search {
    position: absolute;
    inset-inline-start: 0;
    margin-inline-start: .5rem !important
}

.emoji-dropdown .emoji-tabs-delete {
    position: absolute;
    inset-inline-end: 0;
    margin-inline-end: .5rem !important
}

.emoji-dropdown .emoji-tabs .menu-horizontal-div-item {
    margin: 0 .75rem
}

.emoji-dropdown .tabs-container {
    height: 100%
}

.emoji-dropdown .super-stickers {
    gap: .25rem;
    padding: 0 .1875rem
}

.emoji-dropdown .tabs-tab.no-border-top .menu-horizontal-div, .emoji-dropdown .tabs-tab.no-border-top .menu-wrapper {
    border-bottom-color: transparent
}

.emoji-dropdown .gifs-masonry {
    margin: .25rem .1875rem .1875rem;
    border-radius: 10px;
    overflow: hidden
}

.emoticons-container {
    min-height: 100%;
    flex-direction: column;
    height: 100%;
    background-color: transparent !important
}

.emoticons-container.no-menu .emoticons-search-container {
    margin-top: .5rem
}

.emoticons-container.no-menu .scrollable-y {
    height: 100%;
    max-height: 100%
}

.emoticons-container.no-menu .emoticons-categories-container:after {
    display: none
}

body.animation-level-2 .emoticons-will-move-up, body.animation-level-2 .emoticons-will-move-down {
    transition: transform var(--transition-standard-in)
}

.is-searching .emoticons-will-move-up {
    transform: translateY(-3.0625rem)
}

.is-searching .emoticons-will-move-down {
    transform: translateY(.5rem)
}

.emoticons-menu {
    --item-size: 1.875rem;
    width: 100%;
    height: 3.0625rem;
    min-height: 3.0625rem;
    align-items: center;
    padding: 0 .3125rem;
    z-index: 4;
    background-color: transparent
}

.emoticons-menu-wrapper {
    padding: 0;
    height: 3.0625rem;
    max-width: 100%;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    background-color: transparent
}

.emoticons-menu:after {
    content: " ";
    display: block;
    flex: 0 0 auto;
    width: .1875rem;
    height: 1px
}

.emoticons-menu .menu-horizontal-div-item {
    font-size: 1.5rem;
    width: var(--item-size);
    height: var(--item-size);
    line-height: var(--item-size);
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    margin: 0 .3125rem
}

.emoticons-menu .menu-horizontal-div-item.not-local {
    --item-size: 2.375rem;
    padding: .25rem;
    border-radius: .25rem !important
}

.emoticons-menu .menu-horizontal-div-item.active {
    background-color: rgba(var(--primary-text-color-rgb), .06) !important;
    color: rgba(var(--primary-text-color-rgb), .8) !important
}

html.no-touch .emoticons-menu .menu-horizontal-div-item:hover, html.no-touch .emoticons-menu .menu-horizontal-div-item:active {
    color: rgba(var(--primary-text-color-rgb), .8) !important
}

.emoticons-menu .menu-horizontal-div-item-padding {
    width: 100%;
    height: 100%;
    position: relative
}

.emoticons-menu .menu-horizontal-inner {
    overflow: hidden;
    flex: 0 0 auto;
    width: 1.875rem;
    border-radius: 15px;
    margin: 0 .3125rem
}

html.is-safari .emoticons-menu .menu-horizontal-inner {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
}

body.animation-level-2 .emoticons-menu .menu-horizontal-inner {
    transition: width .2s cubic-bezier(.42, 0, .58, 1)
}

.emoticons-menu .menu-horizontal-inner-scroll {
    position: relative;
    width: 8.5rem;
    height: 100%;
    display: flex;
    align-items: center
}

.emoticons-menu .menu-horizontal-inner .menu-horizontal-div-item {
    transform: scale(1);
    margin: 0 !important
}

body.animation-level-2 .emoticons-menu .menu-horizontal-inner .menu-horizontal-div-item {
    transition: transform .2s cubic-bezier(.42, 0, .58, 1) !important
}

.emoticons-menu .menu-horizontal-inner.active {
    width: 8.5rem;
    background-color: rgba(var(--primary-text-color-rgb), .06) !important
}

.emoticons-menu .menu-horizontal-inner.active .menu-horizontal-div-item {
    transform: scale(.8)
}

.emoticons-menu .menu-horizontal-inner.active .menu-horizontal-div-item.active {
    background-color: transparent !important
}

.emoticons-menu .menu-horizontal-inner:not(.active) {
    cursor: pointer
}

.emoticons-menu .menu-horizontal-inner:not(.active) .menu-horizontal-inner-scroll {
    pointer-events: none
}

.emoticons-menu .menu-horizontal-inner:not(.active) .menu-horizontal-div-item:first-child {
    pointer-events: all
}

.emoticons-content {
    flex: 1;
    padding: 0;
    position: relative
}

.emoticons-content .emoji-category {
    position: relative
}

.emoticons-content .sticky_sentinel--top {
    top: 0;
    height: 1px
}

.emoticons-content .category-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: 1.1875rem;
    color: rgba(var(--primary-text-color-rgb), .42);
    padding: .75rem .875rem .375rem;
    width: 100%;
    position: relative;
    text-align: center;
    cursor: pointer
}

.emoticons-content .category-title .btn-icon {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    z-index: 1;
    pointer-events: all
}

.emoticons-content .category-title-lock {
    line-height: inherit;
    vertical-align: middle;
    margin-inline-end: .125rem;
    display: none
}

.emoticons-content:not(.has-premium) .is-premium-set .category-title-lock {
    display: inline
}

.emoticons-content .scrollable-y {
    height: calc(100% + 3.0625rem);
    max-height: none
}

.emoticons-search-container {
    height: 2.375rem;
    margin: 0 .5rem .25rem;
    border-radius: 10px;
    background-color: rgba(var(--primary-text-color-rgb), .06)
}

.emoticons-search-input {
    background: none;
    border-radius: inherit;
    border: none
}

.emoticons-search-input-container {
    --height: 2.375rem;
    --icon-size: 1.25rem;
    --primary-color: var(--secondary-text-color);
    --border-width: 0px;
    --padding-horizontal: calc(var(--icon-size) + 1.375rem);
    --icon-left-offset: 1rem;
    background: none;
    border-radius: inherit;
    margin: 0
}

.emoticons-search-input-container .input-search-clear {
    inset-inline-end: .1875rem
}

.emoticons-search-input-arrow {
    pointer-events: all;
    inset-inline-start: calc(var(--icon-left-offset) - (2rem - var(--icon-size)) / 2 - .125rem);
    font-size: 1.5rem !important;
    padding: .25rem !important
}

.emoticons-search-input-arrow.is-hiding {
    pointer-events: none
}

.emoticons-search-input-scrollable {
    position: absolute;
    width: auto;
    height: auto;
    inset: 0;
    inset-inline-start: var(--padding-horizontal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: all;
    z-index: 1;
    opacity: 1
}

body.animation-level-2 .emoticons-search-input-scrollable {
    transition: opacity var(--transition-standard-in)
}

.emoticons-search-input-scrollable.is-searching {
    pointer-events: none;
    opacity: 0
}

.emoticons-search-input-scrollable.is-scrolled {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) .75rem)
}

.emoticons-search-input-scrollable .input-search-placeholder {
    inset-inline-start: auto;
    position: relative;
    min-width: 132px;
    cursor: text;
    pointer-events: all
}

.emoticons-search-input-categories {
    display: flex;
    position: relative;
    margin-inline-end: .375rem;
    gap: 7px
}

.emoticons-search-input-category {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    cursor: pointer;
    padding: .125rem
}

.emoticons-search-input-category-sticker {
    opacity: .3;
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.emoticons-search-input-category.active {
    background-color: rgba(var(--primary-text-color-rgb), .06) !important
}

.emoticons-search-input-category.active .emoticons-search-input-category-sticker {
    opacity: .7
}

html.no-touch .emoticons-search-input-category:hover, html.no-touch .emoticons-search-input-category:active {
    background-color: rgba(var(--primary-text-color-rgb), .06) !important
}

.emoticons-categories-container {
    width: 100%
}

.emoticons-categories-container.emoticons-has-search:after {
    content: " ";
    display: block;
    height: 3.5625rem
}

.is-searching .emoticons-categories-container.emoticons-has-search:after {
    height: .5rem
}

.emoticons-not-found {
    color: rgba(var(--primary-text-color-rgb), .42);
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    font-weight: var(--font-weight-bold)
}

.emoticons-padding {
    height: 3.0625rem
}

.emoji-padding .super-emojis {
    padding: 0 .5rem
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.2)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

.selector {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.selector .selector-search-section {
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1
}

.selector-search-container {
    flex: 0 0 auto;
    position: relative;
    max-height: 132px;
    overflow: hidden
}

.selector-search-container .scrollable {
    position: relative;
    max-height: inherit
}

.selector-search {
    padding-inline: 1rem;
    display: flex;
    flex-flow: wrap;
    position: relative
}

.selector-search-section-container.is-countries .selector-user-avatar {
    --multiplier: 1.125;
    background: none
}

.selector-search-input {
    border: none;
    outline: none;
    flex: 1 1 auto;
    line-height: 1
}

.selector-search .selector-search-input {
    padding: 7px 0 19px
}

.selector-user {
    --selector-user-size: 2rem;
    color: var(--primary-text-color);
    background-color: var(--light-secondary-text-color);
    font-size: 1rem;
    padding-inline-end: .75rem;
    margin-inline: -.25rem .75rem;
    height: var(--selector-user-size);
    line-height: var(--selector-user-size);
    margin-bottom: 7px;
    border-radius: 1.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex: 0 0 auto;
    max-width: 11.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.selector-user-alone {
    margin: 0
}

html.no-touch .selector-user.hover-primary:hover, html.no-touch .selector-user.hover-primary:active {
    background-color: var(--light-primary-color)
}

.selector-user.hover-primary .selector-user-avatar-close {
    display: none
}

body.animation-level-2 .selector-user {
    transform-origin: var(--transform-origin-left-center);
    transition: .15s opacity, .15s transform, .15s background-color, .15s color
}

body.animation-level-2 .selector-user.scale-in {
    animation: scaleIn .15s ease forwards
}

body.animation-level-2 .selector-user.scale-out {
    animation: scaleIn .15s ease forwards;
    animation-direction: reverse
}

html.no-touch .selector-user:hover, html.no-touch .selector-user:active {
    background-color: var(--light-danger-color);
    cursor: pointer
}

html.no-touch .selector-user:hover .selector-user-avatar-close, html.no-touch .selector-user:active .selector-user-avatar-close {
    opacity: 1;
    transform: scaleX(-1) rotate(-90deg)
}

.selector-user-avatar {
    border-radius: inherit;
    margin-top: calc((var(--selector-user-size) - var(--size)) / 2);
    margin-left: calc((var(--selector-user-size) - var(--size)) / 2)
}

.selector-user-avatar-close {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    background-color: var(--danger-color);
    height: 100%;
    width: 100%;
    z-index: 2;
    font-size: 1.375rem;
    line-height: var(--size) !important;
    opacity: 0;
    transform: scaleX(-1) rotate(0);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

body.animation-level-2 .selector-user-avatar-close {
    transition: .2s opacity, .2s transform
}

.selector-user-avatar-container {
    float: inline-start;
    margin-inline-end: 8px;
    overflow: hidden;
    position: relative;
    border-radius: 50% !important;
    color: #fff;
    flex: 0 0 auto;
    pointer-events: none
}

html.is-safari .selector-user-avatar-container {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
}

.selector-user-title {
    pointer-events: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.selector .chatlist-container {
    height: 100%;
    flex: 1 1 auto
}

.selector .chatlist-container .scrollable {
    display: flex;
    flex-direction: column
}

.selector .chatlist-container .scrollable .sidebar-left-section-container, .selector .chatlist-container .scrollable .gradient-delimiter {
    flex: 0 0 auto
}

.selector-list-section-container {
    flex: 1 1 auto !important
}

.selector-list-section-container .sidebar-left-section {
    display: flex;
    flex-direction: column
}

.selector-list-section-container .sidebar-left-section, .selector-list-section-container .sidebar-left-section .selector-list-section-content2 {
    min-height: max(360px, 100%)
}

.selector-list-section-container .selector-list-section-content {
    position: relative;
    flex: 1 1 auto
}

.selector > hr {
    margin: 0;
    padding: 0
}

.selector .checkbox {
    margin-top: 11px;
    padding-inline-start: 11px
}

.selector .checkbox-field:not(.checkbox-field-toggle) {
    --offset-left: 0 !important;
    pointer-events: none;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
    top: 50%;
    z-index: 1
}

.selector .checkbox-field:not(.checkbox-field-toggle):first-child {
    margin-inline: .6875rem 1.6875rem
}

.selector .checkbox-field-round {
    inset-inline-end: 1.125rem;
    --size: 1.25rem
}

.selector .checkbox-field-round .checkbox-box-border {
    z-index: unset
}

.selector .checkbox-field-round .checkbox-box-check {
    --offset: 6px
}

.selector-left .checkbox-field-round {
    inset-inline: 1.125rem auto
}

.selector-square .checkbox-field {
    inset-inline-start: 1.25rem !important
}

.selector-square .chatlist-chat.row-with-padding {
    padding-inline-start: 7.5rem !important
}

.selector-square .dialog-avatar {
    margin-inline-start: 3rem !important
}

.selector-empty-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 1rem
}

.selector-empty-placeholder.is-full {
    justify-content: center;
    inset: 0;
    transform: none;
    background-color: var(--surface-color)
}

.selector-empty-placeholder-sticker {
    width: 140px;
    height: 140px;
    position: relative;
    margin-bottom: 1rem
}

.selector-empty-placeholder-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-20)
}

.selector-empty-placeholder-title, .selector-empty-placeholder-description {
    text-align: center
}

.selector-empty-placeholder-description {
    line-height: var(--line-height-16);
    margin-top: .125rem;
    padding-bottom: 40px;
    color: var(--secondary-text-color);
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.selector .dialogs-placeholder-canvas {
    position: absolute;
    inset: 0;
    z-index: 1
}

.selector.is-countries .selector-countries-emoji {
    font-size: 125%
}

.selector.is-countries .row-title {
    display: flex;
    align-items: center;
    gap: .5rem
}

.selector-forum-topic {
    font-weight: var(--font-weight-bold)
}

.selector-premium-lock {
    border: 2px solid var(--surface-color);
    position: absolute;
    color: #fff;
    font-size: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--premium-color);
    border-radius: 50%;
    text-align: center;
    line-height: 1.25rem;
    inset-inline-start: 2.25rem;
    top: 2rem
}

.gifs-masonry {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns:repeat(3, 1fr);
    gap: .125rem
}

.gifs-masonry .gif {
    width: auto !important;
    height: 0 !important
}

.gifs-masonry .media-video, .gifs-masonry .media-photo {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.gifs-masonry .media-photo {
    position: absolute;
    left: 0;
    top: 0
}

.gifs-masonry .preloader-container {
    z-index: 2
}

.preloader-circular {
    animation: rotate 1s linear infinite;
    height: 100%;
    transform-origin: center center;
    position: absolute;
    inset: 0;
    margin: auto
}

.preloader-path {
    stroke-dasharray: 93.6375, 124.85;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke: #fff;
    stroke-width: 3
}

.preloader-container {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 54px;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: scale(0)
}

body:not(.animation-level-0) .preloader-container {
    transition: opacity .2s ease-in-out, transform .2s ease-in-out
}

.preloader-container.is-visible:not(.backwards) {
    opacity: 1;
    transform: scale(1)
}

.preloader-container-rtmp {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0px) brightness(1);
    backdrop-filter: blur(0px) brightness(1);
    border-radius: inherit
}

body:not(.animation-level-0) .preloader-container-rtmp {
    transition: opacity .2s ease-in-out, -webkit-backdrop-filter .2s ease-in-out;
    transition: opacity .2s ease-in-out, backdrop-filter .2s ease-in-out;
    transition: opacity .2s ease-in-out, backdrop-filter .2s ease-in-out, -webkit-backdrop-filter .2s ease-in-out
}

.preloader-container-rtmp.is-visible:not(.backwards) {
    opacity: 1
}

.preloader-template {
    border-radius: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0
}

.ckin__player.is-buffering.default-live .preloader-container-rtmp.is-visible:not(.backwards) {
    -webkit-backdrop-filter: blur(10px) brightness(.8);
    backdrop-filter: blur(10px) brightness(.8)
}

.preloader-container {
    --color: #fff
}

.preloader-container .you-spin-me-round {
    width: 100%;
    height: 100%
}

.preloader-container .preloader-circular {
    animation: none;
    background-color: #0000004d;
    border-radius: 50%;
    width: 100%;
    height: 100%
}

.preloader-container .preloader-path-new {
    stroke-dasharray: 5, 149.82;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke: var(--color);
    stroke-width: 2
}

body.animation-level-2 .preloader-container.is-visible:not(.manual) .you-spin-me-round, body.animation-level-2 .preloader-container.is-visible.animating .you-spin-me-round {
    animation: rotate 2s linear infinite
}

body.animation-level-2 .preloader-container.is-visible:not(.manual) .preloader-path-new, body.animation-level-2 .preloader-container.is-visible.animating .preloader-path-new {
    transition: stroke-dasharray .2s ease-in-out, stroke-width .2s ease-in-out
}

.preloader-container.preloader-swing {
    cursor: default
}

.preloader-container.preloader-swing .you-spin-me-round {
    animation: rotate 1s linear infinite !important
}

.preloader-container.preloader-swing .preloader-path-new {
    stroke-dasharray: 112.36, 149.82
}

.preloader-container.preloader-swing.preloader-streamable .preloader-path-new {
    stroke-dasharray: 88.95, 118.61
}

.preloader-container .preloader-close, .preloader-container .preloader-download {
    position: absolute;
    inset: 0;
    margin: auto;
    color: var(--color);
    width: 56%;
    height: 56%;
    opacity: 1
}

body.animation-level-2 .preloader-container .preloader-close, body.animation-level-2 .preloader-container .preloader-download {
    transition: opacity .2s ease-in-out
}

.preloader-container .preloader-close path, .preloader-container .preloader-download path {
    fill: var(--color)
}

html.no-touch .preloader-container .preloader-close:hover, html.no-touch .preloader-container .preloader-close:active, html.no-touch .preloader-container .preloader-download:hover, html.no-touch .preloader-container .preloader-download:active {
    background: none
}

.preloader-container:not(.manual) .preloader-download, .preloader-container.manual .preloader-close {
    opacity: 0
}

.preloader-container.manual .preloader-path-new {
    stroke-width: 0
}

.preloader-container .preloader-download {
    width: 1.5rem;
    height: 1.5rem
}

.preloader-container.preloader-streamable, .preloader-container.preloader-streamable svg {
    cursor: pointer !important
}

.preloader-container.preloader-streamable circle {
    stroke-width: 2.5 !important
}

.preloader-container.preloader-streamable:after {
    content: "";
    position: absolute;
    width: .8125rem;
    height: .8125rem;
    border-radius: .125rem;
    background-color: var(--color);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.preloader-container.preloader-transparent .preloader-circular {
    background-color: transparent
}

.preloader-container.preloader-bold .preloader-path-new {
    stroke-width: 3.5
}

@keyframes rotate {
    to {
        transform: rotate(360deg)
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

@keyframes dashNew {
    0% {
        stroke-dasharray: 1, 149.82;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 112.36, 149.82;
        stroke-dashoffset: -38
    }
    to {
        stroke-dasharray: 112.36, 149.82;
        stroke-dashoffset: -149.82
    }
}

@keyframes dashNewStreamable {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    to {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -237%
    }
}

.rp {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.rp-overflow .c-ripple, .btn-menu-toggle.rp .c-ripple, .menu-horizontal-div-item.rp .c-ripple, .btn-corner.rp .c-ripple, .pinned-container-wrapper.rp .c-ripple, .btn-control-small.rp .c-ripple {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit
}

.rp-overflow .c-ripple__circle, .btn-menu-toggle.rp .c-ripple__circle, .menu-horizontal-div-item.rp .c-ripple__circle, .btn-corner.rp .c-ripple__circle, .pinned-container-wrapper.rp .c-ripple__circle, .btn-control-small.rp .c-ripple__circle {
    overflow: hidden
}

.c-ripple {
    position: absolute;
    inset: 0
}

html.is-safari .c-ripple {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    border-radius: inherit
}

.c-ripple__circle {
    opacity: var(--ripple-max-opacity, 1);
    background-color: var(--ripple-color);
    display: block;
    position: absolute;
    transform: scale(0);
    border-radius: 50%;
    animation-name: ripple-effect;
    animation-fill-mode: forwards;
    animation-duration: var(--ripple-duration);
    transition: calc(var(--ripple-duration) / 2) opacity, calc(var(--ripple-duration) / 2) background-color;
    pointer-events: none
}

.c-ripple__circle.hiding, .c-ripple__square.hiding {
    opacity: 0
}

@keyframes ripple-effect {
    0% {
        transform: scale(var(--ripple-start-scale))
    }
    to {
        transform: scale(var(--ripple-end-scale))
    }
}

.avatar-like {
    --size: 54px;
    --multiplier: 1;
    color: #fff !important;
    width: var(--size);
    height: var(--size);
    line-height: var(--size) !important;
    text-align: center;
    font-size: calc(1.25rem / var(--multiplier));
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold)
}

.avatar-gradient {
    --color-top: var(--avatar-color-top);
    --color-bottom: var(--avatar-color-bottom);
    background: linear-gradient(var(--color-top), var(--color-bottom))
}

.avatar-gradient[data-color=red] {
    --color-top: var(--peer-avatar-red-top);
    --color-bottom: var(--peer-avatar-red-bottom)
}

.avatar-gradient[data-color=orange] {
    --color-top: var(--peer-avatar-orange-top);
    --color-bottom: var(--peer-avatar-orange-bottom)
}

.avatar-gradient[data-color=violet] {
    --color-top: var(--peer-avatar-violet-top);
    --color-bottom: var(--peer-avatar-violet-bottom)
}

.avatar-gradient[data-color=green] {
    --color-top: var(--peer-avatar-green-top);
    --color-bottom: var(--peer-avatar-green-bottom)
}

.avatar-gradient[data-color=cyan] {
    --color-top: var(--peer-avatar-cyan-top);
    --color-bottom: var(--peer-avatar-cyan-bottom)
}

.avatar-gradient[data-color=pink] {
    --color-top: var(--peer-avatar-pink-top);
    --color-bottom: var(--peer-avatar-pink-bottom)
}

.avatar-gradient[data-color=blue] {
    --color-top: var(--peer-avatar-blue-top);
    --color-bottom: var(--peer-avatar-blue-bottom)
}

.avatar-gradient[data-color=archive] {
    --color-top: var(--peer-avatar-archive-top);
    --color-bottom: var(--peer-avatar-archive-bottom)
}

.avatar-gradient[data-color=premium] {
    --color-bottom: #db5c9d;
    --color-top: #a767ff
}

.avatar-gradient[data-color=stars] {
    --color-bottom: #FFAA00;
    --color-top: #FFCD3A
}

.avatar {
    border-radius: 50%
}

.avatar-icon {
    font-size: calc(32px / var(--multiplier));
    line-height: inherit !important
}

.avatar-icon-calendarfilter {
    font-size: calc(36px / var(--multiplier))
}

.avatar-icon-saved {
    font-size: calc(30px / var(--multiplier)) !important
}

.avatar-icon-reply_filled {
    font-size: calc(28px / var(--multiplier)) !important
}

.avatar-icon-deletedaccount {
    overflow: hidden;
    font-size: calc(30px / var(--multiplier))
}

.avatar-icon-author_hidden, .avatar-icon-mynotes {
    font-size: calc(44px / var(--multiplier))
}

.avatar.media-container {
    position: relative
}

.avatar-photo {
    width: var(--size) !important;
    height: var(--size) !important;
    border-radius: inherit !important;
    display: block
}

.avatar-photo.fade-in {
    animation: fade-in-opacity .2s ease forwards
}

.avatar-photo.emoji {
    width: calc(1.125rem / var(--multiplier)) !important;
    height: calc(1.125rem / var(--multiplier)) !important;
    vertical-align: middle !important
}

.avatar.is-forum {
    border-radius: var(--avatar-border-radius-forum)
}

.avatar.is-topic {
    position: relative;
    background: none;
    border-radius: 0
}

.avatar.is-topic .topic-icon {
    --size: inherit
}

.avatar.is-online {
    position: relative
}

.avatar.is-online:after {
    position: absolute;
    content: " ";
    display: block;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
    background-color: var(--avatar-online-color);
    width: 14px;
    height: 14px;
    left: 2.4375rem;
    top: 2.4375rem
}

.avatar[clickable] {
    cursor: pointer
}

.avatar.avatar-relative {
    position: relative
}

.avatar-stories-svg {
    position: absolute;
    inset: var(--offset);
    width: calc(100% + var(--offset) * -2);
    height: calc(100% + var(--offset) * -2)
}

.avatar-stories-simple {
    --offset: -.25rem;
    position: absolute;
    top: var(--offset);
    right: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    border-radius: 50%;
    background: var(--avatar-color-story-read)
}

.avatar-stories-simple.is-unread {
    background-image: linear-gradient(215.87deg, var(--avatar-color-story-unread-from) -1.61%, var(--avatar-color-story-unread-to) 97.44%)
}

.avatar-stories-simple.is-close {
    background-image: linear-gradient(180deg, var(--avatar-color-story-close-from) 0%, var(--avatar-color-story-close-to) 100%)
}

.avatar-star {
    position: absolute;
    top: 65%;
    left: 65%;
    width: calc(var(--size) * .4);
    height: calc(var(--size) * .4);
    overflow: unset;
    pointer-events: none;
    z-index: 1
}

.avatar.has-stories {
    position: relative;
    background: none;
    pointer-events: all
}

.avatar.has-stories .avatar {
    position: relative
}

.avatar-162 {
    --size: 162px;
    --multiplier: .333333
}

.avatar-144 {
    --size: 144px;
    --multiplier: .375
}

.avatar-120 {
    --size: 120px;
    --multiplier: .45
}

.avatar-128 {
    --size: 128px;
    --multiplier: .421875
}

.avatar-100 {
    --size: 100px;
    --multiplier: .54
}

.avatar-107 {
    --size: 107px;
    --multiplier: .504672
}

.avatar-90 {
    --size: 90px;
    --multiplier: .6
}

.avatar-89 {
    --size: 89px;
    --multiplier: .606742
}

.avatar-86 {
    --size: 86px;
    --multiplier: .627907
}

.avatar-84 {
    --size: 84px;
    --multiplier: .642857
}

.avatar-76 {
    --size: 76px;
    --multiplier: .710526
}

.avatar-64 {
    --size: 64px;
    --multiplier: .84375
}

.avatar-60 {
    --size: 60px;
    --multiplier: .9
}

.avatar-48 {
    --size: 48px;
    --multiplier: 1.125
}

.avatar-46 {
    --size: 46px;
    --multiplier: 1.173913
}

.avatar-44 {
    --size: 44px;
    --multiplier: 1.227272
}

.avatar-42 {
    --size: 42px;
    --multiplier: 1.285714
}

.avatar-40 {
    --size: 40px;
    --multiplier: 1.35
}

.avatar-37 {
    --size: 37px;
    --multiplier: 1.459459
}

.avatar-36 {
    --size: 36px;
    --multiplier: 1.5
}

.avatar-35 {
    --size: 35px;
    --multiplier: 1.542857
}

.avatar-34 {
    --size: 34px;
    --multiplier: 1.588235
}

.avatar-32 {
    --size: 32px;
    --multiplier: 1.6875
}

.avatar-30 {
    --size: 30px;
    --multiplier: 1.6875
}

.avatar-26 {
    --size: 26px;
    --multiplier: 2.076923
}

.avatar-24 {
    --size: 24px;
    --multiplier: 2.25
}

.avatar-22 {
    --size: 22px;
    --multiplier: 2.454545
}

.avatar-20 {
    --size: 20px;
    --multiplier: 2.7
}

.avatar-18 {
    --size: 18px;
    --multiplier: 3
}

.avatar-16 {
    --size: 16px;
    --multiplier: 3.375
}

.avatar .emoji-image {
    width: calc(1.125rem / var(--multiplier));
    height: calc(1.125rem / var(--multiplier))
}

.avatar-relative .avatar-photo {
    position: absolute;
    top: 0;
    left: 0
}

.avatar-full {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit !important;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.avatar-full .avatar-photo {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover
}

.document {
    --background-color: var(--primary-color);
    height: 70px
}

.document .media-photo {
    border-radius: inherit
}

.document .media-photo.thumbnail {
    left: 0
}

.document-ico {
    background-color: var(--background-color);
    border-radius: .375rem;
    line-height: 1;
    text-align: center
}

html.is-safari .document-ico {
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%)
}

.document-ico-text {
    opacity: 0
}

body.animation-level-2 .document-ico-text {
    transition: opacity .2s ease-in-out
}

.document:not(.document-with-thumb) .document-ico {
    padding: 1.5625rem .25rem 0
}

.document-ico:after {
    --size: 1.125rem;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: .25rem;
    border-style: solid;
    border-width: calc(var(--size) / 2);
    border-left-color: #00000040;
    border-bottom-color: #00000040;
    border-top-color: var(--message-background-color);
    border-right-color: var(--message-background-color)
}

body.animation-level-2 .document-ico:after {
    transition: border-width .2s ease-in-out
}

html.no-touch .document:not(.downloaded):hover .document-ico:after, html.no-touch .document:not(.downloaded):active .document-ico:after {
    border-width: 0
}

html.no-touch .document:not(.downloaded):hover .document-ico-text, html.no-touch .document:not(.downloaded):active .document-ico-text {
    opacity: 0
}

html.no-touch .document:not(.downloaded):hover .preloader-container, html.no-touch .document:not(.downloaded):active .preloader-container {
    opacity: 1 !important
}

.document:not(.downloading) .document-ico-text {
    opacity: 1
}

.document:not(.downloading) .preloader-container {
    opacity: 0 !important
}

.document.downloading .document-ico:after {
    border-width: 0
}

.document-ico {
    font-size: 1.125rem;
    background-size: contain
}

.document-ico, .document-name, .document-size {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.document.ext-zip {
    --background-color: #FB8C00
}

.document.ext-pdf {
    --background-color: #DF3F40
}

.document.ext-apk {
    --background-color: #43A047
}

.document.document-with-thumb {
    --background-color: #fff
}

.document.document-with-thumb .document-ico:after {
    display: none
}

.document.document-with-thumb .document-download {
    background-color: #0003;
    border-radius: .375rem
}

.document.document-with-thumb .preloader-circular {
    transition: background-color .2s
}

.document.document-with-thumb .preloader-container:not(.manual) .preloader-circular {
    background-color: #0000004d !important
}

.document-thumb {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.document-name {
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-16);
    line-height: var(--line-height-16)
}

.document-size {
    color: var(--secondary-text-color);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    pointer-events: none;
    position: relative
}

.document .preloader-container {
    width: 2.5rem;
    height: 2.5rem
}

.document .preloader-circular {
    background-color: transparent !important
}

.document .preloader-path-new {
    stroke-width: 2.5
}

.document, .audio {
    --padding: 0px;
    --icon-size: 3.375rem;
    --icon-margin: .875rem;
    --padding-left: calc(var(--icon-size) + var(--icon-margin) + var(--padding));
    padding: var(--padding);
    padding-inline-start: var(--padding-left);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.document-ico, .document-download, .audio-ico, .audio-download {
    position: absolute;
    margin-inline-start: calc((var(--padding-left) - var(--padding)) * -1);
    width: var(--icon-size);
    height: var(--icon-size);
    color: #fff
}

.document-download, .audio-download {
    z-index: 1;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: opacity .2s ease-in-out;
    opacity: 1
}

.document-download.downloaded, .audio-download.downloaded {
    opacity: 0
}

.document-description, .audio-description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.document:not(.corner-download) .preloader-container:not(.preloader-streamable), .audio:not(.corner-download) .preloader-container:not(.preloader-streamable) {
    transform: scale(1) !important
}

.document .checkbox-field-round, .audio .checkbox-field-round {
    --margin-top: .25rem;
    --margin-left: .125rem;
    margin-left: calc(var(--padding-left) * -1 + var(--icon-size) - var(--size) + var(--margin-left));
    margin-top: calc(var(--icon-size) - var(--size) + var(--margin-top));
    top: auto;
    left: auto
}

.audio-ico {
    display: flex;
    justify-content: center
}

.audio .preloader-circular {
    background-color: transparent !important
}

.audio .preloader-container:not(.preloader-streamable) {
    width: 100%;
    height: 100%
}

.audio {
    overflow: visible !important;
    --icon-size: 3rem;
    --icon-margin: .5625rem;
    height: var(--icon-size)
}

.audio-toggle, .audio-download {
    border-radius: 50%;
    background-color: var(--primary-color);
    align-items: center
}

.audio.corner-download .audio-download {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0 !important;
    top: 57.5%;
    left: 57.5%;
    background: none;
    display: flex !important
}

.audio.corner-download .preloader-container {
    border-radius: inherit;
    background-color: var(--primary-color)
}

.audio.corner-download .preloader-path-new {
    stroke-width: .25rem
}

.audio-play-icon {
    position: absolute;
    inset: 0;
    transform: rotate(-119deg);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    border-radius: inherit
}

body.animation-level-2 .audio-play-icon {
    transition: transform .25s ease-in-out
}

.audio-toggle .part {
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 140px;
    width: 140px
}

body.animation-level-2 .audio-toggle .part {
    transition: -webkit-clip-path .25s ease-in-out;
    transition: clip-path .25s ease-in-out;
    transition: clip-path .25s ease-in-out, -webkit-clip-path .25s ease-in-out
}

.audio-toggle .part.one {
    -webkit-clip-path: polygon(56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471%);
    clip-path: polygon(56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471%)
}

.audio-toggle .part.two {
    -webkit-clip-path: polygon(56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916%);
    clip-path: polygon(56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916%)
}

.audio-toggle.playing .audio-play-icon {
    transform: rotate(-90deg)
}

.audio-toggle:not(.playing) .part {
    height: 136px;
    width: 136px
}

.audio-toggle:not(.playing) .part.one {
    -webkit-clip-path: polygon(43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486%);
    clip-path: polygon(43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486%)
}

.audio-toggle:not(.playing) .part.two {
    -webkit-clip-path: polygon(43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428%);
    clip-path: polygon(43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428%)
}

.audio-download {
    z-index: 2
}

.audio-waveform {
    height: 100%
}

.audio-waveform-background .audio-waveform-bar {
    opacity: .3
}

html.no-touch .audio-waveform-background .audio-waveform-bar:hover, html.no-touch .audio-waveform-background .audio-waveform-bar:active {
    opacity: 1
}

.audio-waveform-fake {
    position: absolute;
    inset: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none
}

.audio-waveform-container {
    position: relative;
    height: 23px;
    margin-top: 1px;
    display: flex;
    align-items: center
}

.audio-waveform-bar {
    fill: var(--primary-color)
}

.audio .audio-details {
    margin-top: 3px;
    margin-bottom: 0
}

.audio .audio-title {
    margin-bottom: -2px
}

.audio.can-transcribe {
    padding-inline-end: 2.25rem
}

.audio .part {
    height: 112px !important;
    width: 112px !important
}

.audio-to-text-button {
    background: var(--light-filled-message-primary-color);
    color: var(--message-primary-color);
    width: -moz-max-content;
    width: max-content;
    font-size: 1.1875rem;
    border-radius: .3125rem;
    width: 2rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    overflow: hidden;
    align-self: flex-end;
    margin-right: -2.25rem;
    margin-top: -1rem
}

html.no-touch .audio-to-text-button:hover:after, html.no-touch .audio-to-text-button:active:after {
    content: " ";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--message-primary-color);
    opacity: .08
}

.audio-to-text-button .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .2s
}

.audio-to-text-button .loader.active {
    opacity: 1
}

.audio-transcribe-outline {
    width: 100%;
    height: 100%
}

@keyframes loading {
    0% {
        stroke-dashoffset: 100
    }
    to {
        stroke-dashoffset: 0
    }
}

.audio-transcribe-outline-rect {
    animation: 1s ease-in-out loading infinite
}

.audio-title {
    font-size: 1rem;
    color: var(--primary-text-color)
}

.audio-time, .audio-subtitle {
    font-size: .875rem;
    color: var(--secondary-text-color);
    display: flex
}

.audio-title, .audio-time, .audio-subtitle {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.audio-subtitle {
    align-items: center
}

.audio-subtitle .audio-time {
    flex: 0 0 auto;
    margin-right: .25rem
}

.audio-title, .audio-subtitle {
    margin-left: -1px
}

.audio-title, .audio:not(.audio-show-progress) .audio-subtitle {
    max-width: 100%
}

.audio.is-voice .audio-time {
    line-height: 1;
    margin-left: -1px;
    margin-top: 7px;
    align-items: center
}

.audio.is-voice .progress-line {
    margin-top: 4px;
    margin-inline-start: 0;
    min-width: 11.25rem
}

.audio.is-voice .progress-line__filled:after {
    opacity: 0
}

.audio.is-voice.is-unread .audio-time:after {
    content: " ";
    width: .5rem;
    height: .5rem;
    background-color: var(--primary-color);
    border-radius: 50%;
    margin-left: .375rem
}

.audio.is-voice.is-unread:not(.is-out) .audio-toggle:not(.playing) + .audio-waveform-container .audio-waveform-background .audio-waveform-bar {
    opacity: 1
}

.audio .progress-line {
    --height: 2px;
    --border-radius: 4px;
    --thumb-size: .75rem;
    flex: 1 1 auto;
    margin: 0 6px 0 5px
}

.audio-with-thumb .audio-play-icon {
    z-index: 1;
    background-color: transparent;
    opacity: 1
}

body.animation-level-2 .audio-with-thumb .audio-play-icon {
    transition: transform .25s ease-in-out, background-color .2s ease-in-out, opacity .2s ease-in-out
}

.audio-with-thumb .audio-play-icon .part {
    background-color: #fff !important
}

.audio-with-thumb .audio-play-icon:not(:last-child) {
    background-color: #0000004d
}

.audio-with-thumb .media-photo {
    border-radius: inherit;
    -o-object-fit: cover;
    object-fit: cover;
    width: inherit;
    height: inherit
}

.audio-with-thumb:not(.corner-download) .audio-download {
    background-color: #0000004d
}

.audio-with-thumb:not(.corner-download).downloading .audio-play-icon {
    opacity: 0
}

.quiz-hint {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 .5rem;
    transition: transform .2s ease
}

body.animation-level-0 .quiz-hint {
    transition: none
}

.quiz-hint.from-top {
    top: .5rem;
    transform: translate3d(0, calc(-100% - var(--push-quiz, 10px)), 0)
}

.quiz-hint.from-bottom {
    bottom: .5rem;
    transform: translate3d(0, calc(100% + var(--push-quiz, 10px)), 0)
}

.quiz-hint.active {
    transform: translateZ(0)
}

.quiz-hint-container {
    background: #000000b3;
    -webkit-backdrop-filter: var(--menu-backdrop-filter);
    backdrop-filter: var(--menu-backdrop-filter);
    text-align: center;
    padding: 10px 18px 12px 50px;
    min-height: 48px;
    border-radius: 12px;
    line-height: var(--line-height-15);
    color: #fff;
    font-size: var(--font-size-15);
    max-width: min(100%, 400px);
    overflow: hidden;
    text-align: start;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    word-break: break-word
}

.quiz-hint-container.has-right-text {
    justify-content: space-between;
    flex: 1 1 auto
}

@media only screen and (max-width: 600px) {
    .quiz-hint-container {
        padding: 10px 18px 12px 54px;
        margin: 0 10px;
        font-size: 14px
    }
}

.quiz-hint-container a {
    color: #fff;
    text-decoration: underline
}

.quiz-hint-container.has-title .quiz-hint-icon {
    top: .625rem
}

.quiz-hint-icon {
    position: absolute;
    left: 15px;
    font-size: 1.5rem;
    top: .75rem
}

.quiz-hint-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    margin-bottom: .125rem
}

.peer-typing {
    margin-inline-end: 4px
}

.peer-typing-container {
    --color: var(--primary-color);
    color: var(--color)
}

.peer-typing-flex {
    display: flex;
    align-items: center
}

.peer-typing:not(.peer-typing-text):not(.peer-typing-choosing-sticker) {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px)
}

.peer-typing-text-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    margin: 0 .5px;
    display: inline-block;
    vertical-align: middle;
    animation-duration: .6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: dotMiddle
}

.peer-typing-text-dot-first {
    animation-name: dotFirst
}

.peer-typing-text-dot-last {
    animation-name: dotLast
}

.peer-typing-upload {
    width: 13px;
    height: 5px;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
    margin-inline-end: .375rem
}

.peer-typing-upload:before, .peer-typing-upload:after {
    display: block;
    content: " ";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    border-radius: inherit
}

.peer-typing-upload:before {
    opacity: .3
}

.peer-typing-upload:after {
    animation: upload 1s ease-in-out infinite
}

.peer-typing-record {
    margin-inline-end: .375rem
}

.peer-typing-record:before {
    content: " ";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    animation: recordBlink 1.25s infinite
}

.peer-typing-choosing-sticker {
    margin-inline-end: .375rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 16px
}

.peer-typing-choosing-sticker-eye {
    width: 8px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid currentColor;
    margin: 0 .0625rem;
    position: relative;
    animation: eye 1.8s ease-in-out infinite
}

.peer-typing-choosing-sticker-eye:before {
    content: " ";
    display: block;
    width: .25rem;
    height: .25rem;
    background-color: currentColor;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    animation: eye-move 1.8s ease-in-out infinite;
    transform: translate(-1px, -50%)
}

@keyframes dotFirst {
    0% {
        transform: scale(.6666666667);
        opacity: .8
    }
    50% {
        transform: scale(.6666666667);
        opacity: .8
    }
    75% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(.6666666667);
        opacity: .8
    }
}

@keyframes dotMiddle {
    0% {
        transform: scale(.8333333333);
        opacity: .9
    }
    12.5% {
        transform: scale(.6666666667);
        opacity: .8
    }
    62.5% {
        transform: scale(.6666666667);
        opacity: .8
    }
    87.5% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(.8333333333);
        opacity: .9
    }
}

@keyframes dotLast {
    0% {
        transform: scale(1);
        opacity: 1
    }
    25% {
        transform: scale(.6666666667);
        opacity: .8
    }
    75% {
        transform: scale(.6666666667);
        opacity: .8
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes upload {
    0% {
        transform: translate(-13px)
    }
    to {
        transform: translate(13px)
    }
}

@keyframes eye {
    0% {
        transform: scale(1.1) translate(-.75px)
    }
    12.5% {
        transform: scale(1) translate(0)
    }
    25% {
        transform: scale(1.1) translate(.375px)
    }
    50% {
        transform: scale(1.1) translate(.75px)
    }
    62.5% {
        transform: scale(1) translate(0)
    }
    75% {
        transform: scale(1.1) translate(-.375px)
    }
    to {
        transform: scale(1.1) translate(-.75px)
    }
}

@keyframes eye-move {
    0% {
        transform: translate(-1px, -50%)
    }
    25% {
        transform: translate(3px, -50%)
    }
    50% {
        transform: translate(3px, -50%)
    }
    75% {
        transform: translate(-1px, -50%)
    }
    to {
        transform: translate(-1px, -50%)
    }
}

poll-element {
    margin-top: -1px;
    display: block;
    width: 330px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--primary-text-color)
}

@media only screen and (max-width: 600px) {
    poll-element {
        width: 240px;
        max-width: 100%
    }
}

poll-element:not(.is-closed):not(.is-voted) .poll-answer {
    cursor: pointer
}

poll-element .poll-title {
    font-weight: var(--font-weight-bold);
    white-space: pre-wrap;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

@media only screen and (max-width: 600px) {
    poll-element .poll-title {
        max-width: 88%;
        white-space: normal
    }
}

poll-element .poll-desc {
    font-size: 14px;
    color: var(--secondary-text-color);
    margin-top: 2px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    position: relative
}

poll-element .poll-type {
    margin-top: 2px
}

poll-element .poll-hint {
    position: absolute;
    font-size: 1.5rem;
    top: -4px;
    right: 2px;
    color: var(--primary-color);
    cursor: pointer;
    transform: scale(1)
}

body.animation-level-2 poll-element .poll-hint {
    transition: transform .2s ease
}

poll-element .poll-hint.active {
    transform: scale(0);
    pointer-events: none
}

poll-element .poll-send-vote {
    cursor: default
}

poll-element .poll-avatars {
    display: flex;
    margin-left: 18px;
    cursor: pointer
}

poll-element .poll-avatar {
    border: 1px solid var(--border-color);
    cursor: pointer;
    width: 18px;
    height: 18px
}

poll-element .poll-answer {
    display: flex;
    position: relative;
    padding-bottom: 20px;
    padding-left: 28px;
    margin-top: 1px
}

poll-element .poll-answer-text {
    margin-top: 6px;
    margin-left: 12px
}

poll-element .poll-answer-percents {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    font-weight: var(--font-weight-bold);
    margin-top: 7px;
    font-size: 14px;
    margin-left: -9px;
    text-align: end;
    width: 40px
}

poll-element .poll-answer-selected {
    position: absolute;
    bottom: 1px;
    left: 15px;
    color: #fff;
    background: var(--primary-color);
    border-radius: 50%;
    height: 16px;
    width: 16px;
    font-size: .75rem;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold)
}

html.no-touch poll-element .poll-answer:hover .animation-ring, html.no-touch poll-element .poll-answer:active .animation-ring {
    visibility: visible;
    transform: scale(1)
}

poll-element .poll-answer.is-voting .progress-ring__circle {
    stroke-dashoffset: -19.792;
    animation: pollAnswerRotate .65s linear infinite
}

poll-element .poll-answer:not(.is-correct):not(.is-chosen) .poll-answer-selected {
    opacity: 0
}

poll-element .poll-answer.is-chosing .circle-hover .poll-answer-selected {
    opacity: 1
}

poll-element .poll-answer.is-chosing ~ .poll-footer .poll-send-vote {
    cursor: pointer
}

poll-element .poll-votes-count {
    color: var(--secondary-text-color);
    font-size: .875rem;
    margin-top: -.5rem
}

poll-element .poll-line {
    height: 35px;
    position: absolute;
    left: 10px;
    bottom: 2px;
    stroke-dashoffset: 0;
    stroke-dasharray: 0, 485.9
}

poll-element .poll-line use {
    stroke-width: 4px;
    stroke-linecap: round;
    stroke: var(--primary-color);
    fill: none
}

poll-element .poll-footer {
    text-align: center;
    margin: -.375rem -.5rem -.375rem -.625rem;
    height: 2.875rem
}

poll-element .poll-footer-button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    font-weight: var(--font-weight-bold);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    font-size: 1rem;
    overflow: hidden
}

poll-element .poll-footer, poll-element .poll-footer-button {
    display: flex;
    align-items: center;
    justify-content: center
}

poll-element .poll-quiz-timer {
    width: 32px;
    height: 32px;
    stroke: #a3adb6;
    transform: rotate(270deg);
    top: -7px;
    fill: none;
    position: absolute;
    right: -2px;
    stroke-linecap: round
}

poll-element .poll-time {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    position: absolute;
    right: 27px;
    color: #a3adb6
}

poll-element.is-quiz .poll-answer.is-chosen:not(.is-correct) use {
    stroke: var(--danger-color)
}

poll-element.is-quiz .poll-answer.is-chosen:not(.is-correct) .poll-answer-selected {
    color: #fff !important;
    background: var(--danger-color);
    font-size: 12px
}

poll-element .circle-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    position: absolute;
    left: -1px;
    top: -1px;
    transform: scale(1)
}

poll-element .circle-hover .poll-answer-selected {
    display: flex !important;
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 16px;
    animation: none
}

body.animation-level-2 poll-element .circle-hover .poll-answer-selected {
    transition: opacity .2s ease
}

poll-element .animation-ring {
    display: block;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    background-color: var(--light-secondary-text-color);
    transform: scale(.1);
    visibility: hidden
}

body.animation-level-2 poll-element .animation-ring {
    transition: transform .12s ease
}

poll-element .progress-ring {
    height: 26px;
    width: 26px;
    top: unset;
    left: unset
}

poll-element .progress-ring__circle {
    transform-origin: center;
    transform: rotate(-90deg);
    stroke-dasharray: 56.5487, 56.5487;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke-width: 2;
    stroke: var(--poll-circle-color);
    fill: transparent
}

poll-element.is-voted .circle-hover, poll-element.is-voted .animation-ring {
    transform: scale(0)
}

poll-element.is-voted .poll-answer-percents {
    opacity: 1
}

poll-element.is-retracting .circle-hover {
    transition-delay: .24s
}

poll-element.is-retracting .animation-ring {
    transition-delay: .22s
}

poll-element.animating .poll-line {
    transition: stroke-dashoffset .34s linear, stroke-dasharray .34s linear
}

poll-element.animating .poll-answer-selected {
    transition-delay: .24s;
    transition: opacity .1s ease forwards
}

poll-element.animating.is-retracting .poll-answer-selected {
    transition-delay: 0s
}

poll-element.animating .poll-answer-percents {
    transition: .34s opacity
}

poll-element.animating .progress-ring__circle {
    transition: stroke-dashoffset .15s
}

poll-element.animating .circle-hover {
    transition: .1s transform
}

poll-element.is-multiple .poll-desc {
    margin-bottom: .5rem
}

poll-element .c-ripple__circle {
    background-color: var(--light-primary-color)
}

@keyframes pollAnswerRotate {
    to {
        transform: rotate(270deg)
    }
}

.transition > .transition-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-fill-mode: forwards !important
}

.transition > .transition-item:not(.active):not(.from):not(.to) {
    display: none !important
}

.transition.zoom-fade > .from {
    transform-origin: center;
    transform: scale(1);
    opacity: 1
}

.transition.zoom-fade > .to {
    transform-origin: center;
    opacity: 0
}

.transition.zoom-fade.animating > .from {
    animation: fade-out-opacity .15s ease
}

.transition.zoom-fade.animating > .to {
    animation: fade-in-opacity .15s ease, zoom-fade-in-move .15s ease
}

.transition.zoom-fade.backwards > .from {
    transform: scale(1)
}

.transition.zoom-fade.backwards > .to {
    transform: scale(.95)
}

.transition.zoom-fade.backwards.animating > .from {
    animation: fade-in-backwards-opacity .1s ease, zoom-fade-in-backwards-move .15s ease
}

.transition.zoom-fade.backwards.animating > .to {
    animation: fade-out-backwards-opacity .15s ease, zoom-fade-out-backwards-move .15s ease
}

.transition.fade > .from {
    opacity: 1
}

.transition.fade > .to {
    opacity: 0
}

.transition.fade.animating > .from {
    animation: fade-out-opacity .15s ease
}

.transition.fade.animating > .to {
    animation: fade-in-opacity .15s ease
}

.transition.fade.backwards.animating > .from {
    animation: fade-in-backwards-opacity .1s ease
}

.transition.fade.backwards.animating > .to {
    animation: fade-out-backwards-opacity .15s ease
}

.transition.slide-fade {
    --easeOutSine: cubic-bezier(.39, .575, .565, 1);
    --easeInSine: cubic-bezier(.47, 0, .745, .715);
    position: relative
}

.transition.slide-fade > .from {
    transform-origin: left center;
    transform: translate(0);
    opacity: 1
}

.transition.slide-fade > .to {
    transform-origin: left center;
    transform: translate(1.5rem);
    opacity: 0
}

.transition.slide-fade.animating > .from {
    animation: fade-out-opacity .4s ease-out, slide-fade-out-move .4s
}

.transition.slide-fade.animating > .to {
    animation: fade-in-opacity .4s var(--easeInSine), slide-fade-in-move .4s
}

.transition.slide-fade.backwards > .from {
    transform: translate(0);
    opacity: 1
}

.transition.slide-fade.backwards > .to {
    transform: translate(-1.5rem);
    opacity: 0
}

.transition.slide-fade.backwards.animating > .from {
    animation: fade-in-backwards-opacity .4s ease-out, slide-fade-in-backwards-move .4s
}

.transition.slide-fade.backwards.animating > .to {
    animation: fade-out-backwards-opacity .4s var(--easeOutSine), slide-fade-out-backwards-move .4s
}

.fade-enter-active, .fade-exit-active {
    transition: opacity .1s ease-out
}

.fade-enter, .fade-exit-to {
    opacity: 0
}

@keyframes zoom-fade-in-move {
    0% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1)
    }
}

@keyframes zoom-fade-in-backwards-move {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(1.1)
    }
}

@keyframes zoom-fade-out-backwards-move {
    0% {
        transform: scale(.95)
    }
    to {
        transform: scale(1)
    }
}

@keyframes slide-fade-in-move {
    0% {
        transform: translate(1.5rem)
    }
    to {
        transform: translate(0)
    }
}

@keyframes slide-fade-out-move {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-1.5rem)
    }
}

@keyframes slide-fade-in-backwards-move {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(1.5rem)
    }
}

@keyframes slide-fade-out-backwards-move {
    0% {
        transform: translate(-1.5rem)
    }
    to {
        transform: translate(0)
    }
}

.row {
    min-height: 3.5rem;
    position: relative;
    padding-block: .4375rem;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.row.no-subtitle, .row.row-small {
    min-height: 3rem;
    padding-top: .1875rem;
    padding-bottom: .1875rem
}

body.animation-level-2 .row {
    transition: opacity var(--transition-standard-in)
}

.row.is-disabled {
    pointer-events: none !important;
    opacity: var(--disabled-opacity)
}

.row.is-fake-disabled .row-row {
    opacity: var(--disabled-opacity)
}

.row.is-fake-disabled .checkbox-field-toggle {
    --primary-color: var(--secondary-color)
}

.row.no-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.row.no-wrap br {
    content: " "
}

.row.no-wrap br:after {
    content: " "
}

.row a {
    position: relative;
    z-index: 1;
    pointer-events: all
}

.row-title-row, .row > .row-title {
    order: 0
}

.row-grid {
    display: grid;
    justify-content: initial;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:"left title right" "left subtitle right";
    align-items: center;
    padding-inline-start: 1rem !important
}

.row-grid.row-with-padding {
    grid-template-columns:3.5rem 1fr auto
}

.row-grid.no-subtitle {
    grid-template-areas:"left title right";
    grid-template-rows:auto
}

.row-grid.no-subtitle .row-title {
    align-self: unset
}

.row-grid.with-midtitle {
    grid-template-areas:"left title right" "left midtitle right" "left subtitle right";
    grid-template-rows:auto auto auto
}

.row-grid .row-title {
    grid-area: title;
    align-self: flex-end
}

.row-grid .row-subtitle {
    grid-area: subtitle;
    align-self: flex-start
}

.row-grid .row-midtitle {
    grid-area: midtitle;
    align-self: flex-start
}

.row-grid .checkbox-field {
    --offset-left: 0 !important;
    grid-area: left;
    width: 3.5rem;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important
}

.row-grid .row-right {
    margin-inline-start: 1rem;
    grid-area: right
}

.row-big {
    min-height: 4.5rem;
    padding-block: .5625rem;
    padding-inline: 1rem .75rem
}

.row-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.row-row .row-title, .row-row .row-subtitle {
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto
}

.row-row .row-title .peer-title, .row-row .row-subtitle .peer-title {
    overflow: hidden;
    text-overflow: ellipsis
}

.row-subtitle-row, .row > .row-subtitle {
    order: 1
}

.row-title {
    color: var(--primary-text-color);
    font-size: var(--font-size);
    line-height: var(--line-height);
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.row-title-right-secondary {
    color: var(--secondary-text-color)
}

.row-title-right .input-clear {
    color: inherit;
    text-align: right;
    pointer-events: all;
    cursor: text
}

.row-title-row.with-delimiter .row-title:first-child {
    border-right: 1px solid var(--border-color)
}

.row-title-badge {
    text-transform: uppercase;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: #fff;
    padding: .1875rem .3125rem;
    font-size: 75%;
    margin-inline-start: .375rem;
    font-weight: var(--font-weight-bold);
    display: inline-block;
    line-height: 1;
    position: relative;
    top: -1px
}

.row-title-right, .row-subtitle-right {
    flex: 0 0 auto !important;
    margin-inline-start: 1rem
}

.row-title, .row-subtitle, .row-midtitle {
    position: relative;
    pointer-events: none
}

.row-midtitle {
    font-size: var(--font-size-14);
    line-height: 20px;
    margin: 1px 0 -1px;
    order: 1
}

.row-with-padding {
    padding-inline-start: 4.5rem
}

@media only screen and (max-width: 600px) {
    .row-with-padding {
        padding-inline-start: 4rem
    }
}

.row-with-padding .row-icon {
    position: absolute;
    inset-inline-start: 1rem;
    font-size: 1.5rem;
    color: var(--secondary-text-color);
    pointer-events: none;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%)
}

.row-with-padding .row-icon-premium-color {
    color: var(--primary-color)
}

.row-with-padding .row-icon-custom-color {
    color: var(--custom-icon-color)
}

.row-with-padding .row-icon-stars-color {
    color: var(--star-golden-color)
}

.row-with-padding:not(.row-with-icon) .row-icon {
    display: none
}

.row-clickable {
    cursor: pointer;
    overflow: hidden
}

@media only screen and (min-width: 601px) {
    .row-clickable {
        border-radius: 10px
    }
}

.row-sortable .row-title, .row-sortable .row-subtitle {
    padding-inline-end: 2.5rem
}

.row-sortable-icon {
    font-size: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    color: var(--secondary-text-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: .75rem;
    pointer-events: none;
    opacity: 0
}

.row-sortable.cant-sort .row-sortable-icon {
    display: none
}

.row-sortable.is-dragging {
    background-color: var(--surface-color) !important;
    z-index: 1
}

html.no-touch .row-sortable.is-dragging:hover, html.no-touch .row-sortable.is-dragging:active {
    background-color: var(--light-filled-secondary-text-color) !important
}

html.no-touch .row-sortable:hover .row-sortable-icon, html.no-touch .row-sortable:active .row-sortable-icon {
    opacity: 1
}

body.animation-level-2 .is-reordering .row-sortable {
    transition: transform var(--transition-standard-in)
}

.row .radio-field-main, .row .checkbox-field {
    padding-inline-start: 3.375rem;
    margin-inline-start: -3.375rem
}

.row .radio-field, .row .radio-field:not(.radio-field-right) .radio-field-main, .row .checkbox-field {
    position: unset
}

.row .radio-field, .row .checkbox-field, .row .offset-left {
    --offset-left: 1rem
}

.row .radio-field {
    margin-top: 0;
    margin-bottom: 0
}

.row .checkbox-field {
    margin-top: 0;
    margin-inline-end: 0;
    margin-bottom: 0;
    height: auto
}

.row .checkbox-field .checkbox-caption {
    padding-inline-start: 0;
    white-space: pre-wrap;
    overflow: unset;
    text-overflow: unset
}

.row .checkbox-field-toggle {
    margin-inline: .125rem .125rem;
    padding: 0
}

.row .checkbox-field-absolute {
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
    left: 0
}

.row .checkbox-field-round .checkbox-box-border {
    z-index: unset
}

.row-subtitle {
    color: var(--secondary-text-color) !important;
    font-size: var(--font-size-14) !important;
    line-height: var(--line-height-14);
    margin-top: .1875rem
}

.row-media {
    width: 2.25rem !important;
    height: 2.25rem !important;
    position: absolute !important;
    margin: 0 !important;
    inset-inline-start: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.row-media-small {
    width: 2rem !important;
    height: 2rem !important;
    inset-inline-start: .75rem !important
}

.row-media-40, .row-media-abitbigger {
    width: 2.625rem !important;
    height: 2.625rem !important;
    inset-inline-start: .75rem !important
}

.row-media-big {
    width: 3rem !important;
    height: 3rem !important;
    inset-inline-start: .5rem !important
}

.row-media-bigger {
    width: 3.375rem !important;
    height: 3.375rem !important;
    inset-inline-start: .5625rem !important
}

.row.menu-open {
    background-color: var(--light-secondary-text-color)
}

.row.accordion-toggler .checkbox-field-toggle {
    pointer-events: all !important
}

.color-picker {
    width: 380px;
    max-width: 100%;
    margin: 1.1875rem auto .25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media only screen and (max-width: 600px) {
    .color-picker {
        padding: 0 .75rem
    }
}

.color-picker-box, .color-picker-color-slider, .color-picker-dragger {
    overflow: visible !important
}

.color-picker-sliders {
    margin: 1rem 0 1.125rem
}

.color-picker-dragger {
    cursor: grab
}

.color-picker-inputs {
    display: flex;
    gap: 1.25rem
}

.color-picker-inputs .input-field {
    flex: 1 1 auto
}

.reply-keyboard {
    background: var(--surface-color);
    position: absolute !important;
    right: 0;
    bottom: calc(100% + .625rem);
    width: 26.25rem !important;
    max-width: 100%;
    max-height: 26.25rem;
    box-shadow: 0 5px 10px 5px #10232f24;
    z-index: 3;
    border-radius: 10px;
    transition: transform var(--esg-transition), opacity var(--esg-transition);
    transform: scale(0);
    opacity: 0;
    transform-origin: bottom right;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden
}

@media only screen and (max-height: 569px), only screen and (max-width: 600px) {
    .reply-keyboard {
        bottom: calc(100% + .5rem)
    }
}

.reply-keyboard.active {
    opacity: 1;
    transform: scale(1)
}

body.animation-level-0 .reply-keyboard {
    transition: none
}

.reply-keyboard-row {
    display: flex
}

.reply-keyboard-row + .reply-keyboard-row {
    margin-top: .3125rem
}

.reply-keyboard-button {
    width: 100%;
    border-radius: .375rem;
    border: 2px solid var(--primary-color);
    text-align: center;
    color: var(--primary-color);
    background-color: transparent;
    height: 3rem;
    font-weight: var(--font-weight-bold);
    font-size: .9375rem
}

body.animation-level-2 .reply-keyboard-button {
    transition: color .15s, background-color .15s
}

html.no-touch .reply-keyboard-button:hover, html.no-touch .reply-keyboard-button:active {
    background-color: var(--primary-color);
    color: #fff
}

.reply-keyboard-button + .reply-keyboard-button {
    margin-left: .3125rem
}

.reply-keyboard .scrollable-y {
    position: relative;
    inset: auto;
    height: auto;
    max-height: 100%;
    padding: .625rem !important
}

.spoiler {
    --anim: .4s ease;
    background-color: var(--spoiler-background-color)
}

.spoiler-text {
    opacity: 0
}

.spoilers-container .custom-emoji-canvas {
    z-index: -1
}

.spoilers-container.is-spoiler-visible.animating .spoiler {
    transition: background-color var(--anim)
}

.spoilers-container.is-spoiler-visible.animating .spoiler-text {
    transition: opacity var(--anim)
}

.spoilers-container.is-spoiler-visible:not(.backwards) .spoiler {
    background-color: transparent
}

.spoilers-container.is-spoiler-visible:not(.backwards) .spoiler-text {
    opacity: 1
}

.spoilers-container:has(.message-spoiler-overlay) .spoiler {
    background-color: unset
}

.spoilers-container:not(.is-spoiler-visible):not(:has(.message-spoiler-overlay)) .spoiler {
    cursor: pointer
}

.spoilers-container:not(.is-spoiler-visible):not(:has(.message-spoiler-overlay)) .spoiler-text {
    pointer-events: none
}

.spoilers-container.can-show-spoiler-text .spoiler-text {
    opacity: 1
}

.message-spoiler-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.message-spoiler-overlay__canvas {
    width: 100%;
    transition: opacity .4s
}

.message-spoiler-overlay__canvas--hidden {
    opacity: 0
}

.bluff-spoiler {
    position: relative;
    display: inline-block;
    --width: .75em;
    --index: 0;
    width: var(--width);
    -webkit-mask-size: 240px 120px;
    mask-size: 240px 120px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: calc(var(--index) * var(--width) * -1) 0px;
    mask-position: calc(var(--index) * var(--width) * -1) 0px;
    opacity: 0;
    transition: opacity .2s;
    white-space: pre;
    background-color: currentColor
}

.tabs-container.animating .bluff-spoiler {
    opacity: 0
}

.emoji-animation {
    position: absolute;
    pointer-events: none
}

.emoji-animation-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5
}

.reactions-like-block {
    --margin-vertical: .375rem;
    --margin-horizontal: .375rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--margin-vertical) / -2)
}

.reactions-like-block.has-no-reactions {
    display: unset
}

.reactions-block {
    margin-top: -.125rem;
    position: relative
}

.reactions-renderer {
    inset: auto !important
}

.reactions-renderer-canvas {
    z-index: 1 !important
}

.reactions-tag.is-locked .reaction-tag {
    opacity: .6
}

.reactions .tooltip {
    --notch-offset: calc(38px + (var(--width) - 53.5px) / 2);
    height: 3.25rem;
    display: flex;
    align-items: center;
    inset-inline-start: -1.3125rem;
    position: absolute;
    top: -4.25rem;
    white-space: nowrap;
    cursor: default
}

.paid-reaction-tooltip {
    top: .25rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: -moz-max-content;
    width: max-content;
    max-width: calc(100% - 1rem)
}

.paid-reaction-tooltip .tooltip-notch {
    display: none
}

.paid-reaction-tooltip.tooltip {
    transform: translate(-50%)
}

.paid-reaction-tooltip.tooltip.is-visible:not(.backwards) {
    transform: translate(-50%)
}

.paid-reaction-tooltip.tooltip.mounted {
    transform: translate(-50%, -1rem)
}

.paid-reaction-tooltip--a-little-wider {
    min-width: 300px
}

.paid-reaction-tooltip .tooltip-icon {
    color: var(--star-golden-color)
}

.paid-reaction-tooltip .tooltip-undo {
    display: flex;
    color: #8edeff;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    margin-inline-start: 2.5rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    white-space: nowrap
}

.paid-reaction-tooltip .tooltip-undo-timer {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    overflow: hidden
}

.paid-reaction-tooltip .tooltip-undo-timer-svg {
    transform: scaleX(-1)
}

.paid-reaction-tooltip .tooltip-undo-timer-circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round
}

.paid-reaction-tooltip .tooltip-undo-timer-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-14);
    margin-top: .5px;
    margin-inline-start: -.25px
}

.reaction {
    display: flex;
    align-items: center
}

.reaction-sticker {
    --custom-emoji-size: var(--reaction-size);
    position: relative;
    width: var(--reaction-size);
    height: var(--reaction-size);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden
}

.reaction-sticker-activate {
    position: absolute;
    inset: var(--reaction-offset);
    z-index: 1
}

.reaction-sticker.has-animation > .media-sticker {
    opacity: 0
}

.reaction-sticker.is-regular .media-sticker {
    --size: calc(var(--reaction-size) + var(--reaction-offset) * -2);
    width: var(--size) !important;
    height: var(--size) !important;
    max-width: var(--size);
    max-height: var(--size);
    inset: auto
}

.reaction-sticker.is-custom {
    border-radius: .3125rem
}

.reaction-sticker.is-custom .custom-emoji, .reaction-sticker.is-custom .media-sticker {
    border-radius: inherit
}

.reaction-inline {
    --reaction-size: .875rem;
    --reaction-offset: -.4375rem;
    min-width: var(--reaction-size);
    min-height: var(--reaction-size)
}

.reaction-inline .reaction-counter {
    font-size: inherit !important;
    order: -1;
    margin-right: .0625rem !important
}

.reaction-block {
    --additional-height: .5rem;
    --reaction-size: 1.375rem;
    --reaction-offset: -.5625rem;
    --background-color: var(--message-highlighting-color);
    --counter-color: #fff;
    --reaction-total-size: calc(var(--reaction-size) + var(--additional-height));
    border-radius: var(--reaction-total-size);
    padding: 0 .5rem;
    background-color: var(--background-color);
    color: var(--counter-color)
}

html.no-touch .reaction-block:hover:after, html.no-touch .reaction-block:active:after {
    position: absolute;
    inset: 0;
    content: " ";
    background-color: var(--chosen-background-color);
    border-radius: inherit;
    opacity: .08
}

.reaction-block .reaction-sticker, .reaction-block .reaction-counter {
    z-index: 1;
    pointer-events: none
}

.reaction-block:before {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: var(--chosen-background-color);
    border-radius: inherit;
    transform: scale(0);
    opacity: 0
}

.reaction-block.is-chosen:not(.backwards):before {
    transform: scale(1);
    opacity: 1
}

.reaction-block.is-chosen:not(.backwards) .stacked-avatars {
    --border-color: var(--chosen-background-color)
}

.reaction-block.is-chosen.animating:before {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.reaction-block.is-chosen.animating .reaction-counter {
    transition: color var(--transition-standard-in)
}

.reaction-block.is-chosen.animating .stacked-avatars-avatar-container {
    transition: border-color var(--transition-standard-in)
}

.reaction-block .stacked-avatars {
    --border-color: transparent;
    --border-size: .125rem;
    --margin-right: -.875rem;
    margin-inline-start: .1875rem
}

.reaction-block.is-paid {
    --chosen-background-color: #FFBC2E !important;
    --background-color: rgba(255, 188, 46, .2) !important;
    color: #e98111;
    transition: transform var(--reaction-paid-transition);
    z-index: 2
}

.reaction-block.is-paid .currency-star-icon {
    transform: translate(1px)
}

.reaction-block.is-paid .reaction-sticker {
    overflow: visible;
    z-index: 2
}

.reaction-block.is-paid .reaction-sticker-activate {
    width: 4rem;
    height: 4rem;
    inset: -1.25rem;
    z-index: 2
}

.reaction-block.is-paid.is-chosen:not(.backwards) {
    color: #fff
}

.reaction-block.is-paid.effect-active {
    box-shadow: 0 0 .25rem #0003, 0 0 1.25rem #0003;
    transform: scale3d(1.5, 1.5, 1.5)
}

.reaction-block.is-paid.effect-active .reaction-paid-counter {
    opacity: 1;
    transform: translate(-50%)
}

.reaction-block.is-paid .reaction-counter {
    transition: color var(--reaction-paid-transition)
}

.reaction-block .reaction-counter {
    font-size: .9375rem !important;
    font-weight: var(--font-weight-bold);
    margin-block: 0;
    margin-inline: .375rem .0625rem;
    line-height: 1.125rem;
    position: relative
}

.reaction-like-block {
    --chosen-background-color: var(--message-primary-color);
    height: var(--reaction-total-size);
    margin-top: var(--margin-vertical);
    margin-inline-end: var(--margin-horizontal);
    cursor: pointer;
    position: relative;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important
}

.reaction-like-block.is-last {
    margin-inline-end: 0 !important
}

.reaction-tag {
    --additional-height: .625rem;
    --reaction-size: 1.25rem;
    --reaction-offset: -.5625rem;
    --reaction-total-size: calc(var(--reaction-size) + var(--additional-height));
    --counter-color: #9BA0A5;
    --background-color: var(--old-input-background-color);
    --dot-color: rgba(155, 160, 165, .4);
    min-width: 2.6875rem;
    padding-inline: .375rem
}

.reaction-tag.is-chosen:not(.backwards) {
    --counter-color: var(--message-icon-text-color);
    --background-color: var(--chosen-background-color);
    --dot-color: var(--message-reaction-tag-dot-color)
}

.reaction-tag.is-chosen.animating .reaction-tag-svg {
    transition: fill var(--transition-standard-in)
}

.reaction-tag.is-chosen.animating .reaction-tag-dot, .reaction-tag.is-chosen.animating .reaction-tag-background {
    transition: background-color var(--transition-standard-in)
}

.reaction-tag.is-chosen.animating .reaction-counter {
    transition: color var(--transition-standard-in)
}

.reaction-tag-svg {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 43px;
    height: 30px;
    fill: var(--background-color)
}

.reaction-tag-dot {
    position: relative;
    margin-left: 5px;
    width: .375rem;
    height: .375rem;
    background-color: var(--dot-color);
    border-radius: 50%;
    order: 999
}

.reaction-tag-background {
    position: absolute;
    inset: 0;
    background-color: var(--background-color);
    border-radius: inherit;
    margin-inline-end: 18px;
    border-radius: 7px
}

.reaction-tag-svg, .reaction-tag-dot, .reaction-tag-background {
    pointer-events: none
}

.reaction-tag-lock {
    --background-color: var(--light-filled-primary-color);
    --dot-color: rgba(var(--primary-color-rgb), .4);
    --counter-color: currentColor;
    color: var(--primary-color);
    opacity: 1 !important
}

.reaction-tag-lock .reaction-sticker-icon {
    font-size: 1.25rem
}

.reaction-tag .reaction-counter {
    font-size: var(--font-size-16) !important;
    font-weight: var(--font-weight-bold);
    margin-inline: .3125rem .0625rem;
    line-height: 21px;
    position: relative;
    color: var(--counter-color);
    pointer-events: none;
    white-space: nowrap
}

.reaction-paid-background {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    fill: #e78510
}

.reaction-paid-counter {
    width: auto !important;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translate(-50%, .5rem);
    z-index: 2;
    opacity: 0;
    transition: opacity var(--reaction-paid-transition), transform var(--reaction-paid-transition), max-width var(--reaction-paid-transition) !important;
    font-family: var(--font-rounded);
    font-size: 1.625rem;
    line-height: 1.75rem;
    filter: drop-shadow(0 0 1.25rem rgba(0, 0, 0, .5));
    pointer-events: none
}

.reaction-paid-counter .animated-super-row, .reaction-paid-counter .animated-counter-decimal-prefix {
    -webkit-text-stroke: 1px #E58E0D;
    background: linear-gradient(180deg, #ffd55d, #ffbf3e);
    color: transparent;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text
}

.stacked-avatars {
    --border-color: var(--surface-color);
    --border-size: 1px;
    --margin-right: -.3125rem;
    --avatar-size: 1rem;
    --avatar-total-size: calc(var(--avatar-size) + var(--border-size) * 2);
    display: flex;
    flex-direction: row-reverse
}

.stacked-avatars-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    z-index: 0
}

.stacked-avatars-avatar-container {
    width: var(--avatar-total-size);
    height: var(--avatar-total-size);
    border: var(--border-size) solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    margin-inline-end: var(--margin-right)
}

.stacked-avatars-avatar-container.is-first {
    margin-inline-end: 0
}

.sticker-viewer {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.sticker-viewer:before {
    position: absolute;
    inset: 0;
    background-color: #0009;
    opacity: 0;
    content: " "
}

body.animation-level-2 .sticker-viewer:before {
    transition: opacity var(--sticker-viewer-open-transition-out)
}

.sticker-viewer.is-visible:not(.backwards):before {
    opacity: 1
}

body.animation-level-2 .sticker-viewer.is-visible:not(.backwards):before {
    transition: opacity var(--sticker-viewer-open-transition-in)
}

.sticker-viewer.is-visible:not(.backwards) .sticker-viewer-transformer:not(.is-switching) {
    transform: translate(var(--translateX)) scale(1) !important
}

body.animation-level-2 .sticker-viewer.is-visible:not(.backwards) .sticker-viewer-transformer:not(.is-switching) {
    transition: transform var(--sticker-viewer-open-transition-in)
}

.sticker-viewer.is-visible:not(.backwards) .sticker-viewer-emoji, .sticker-viewer.is-visible:not(.backwards) .sticker-viewer-sticker, .sticker-viewer.is-visible:not(.backwards) .emoji-animation {
    opacity: 1
}

body.animation-level-2 .sticker-viewer.is-visible:not(.backwards) .sticker-viewer-emoji, body.animation-level-2 .sticker-viewer.is-visible:not(.backwards) .sticker-viewer-sticker, body.animation-level-2 .sticker-viewer.is-visible:not(.backwards) .emoji-animation {
    transition: opacity var(--sticker-viewer-open-transition-in)
}

body.animation-level-2 .sticker-viewer.is-visible:not(.backwards) .sticker-viewer-sticker:not(.is-overflow) {
    transition: opacity 0s
}

.sticker-viewer-transformer {
    --translateX: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 360px;
    height: 360px
}

.sticker-viewer-transformer.has-effect {
    width: 280px;
    height: 280px
}

.sticker-viewer-transformer.has-effect .sticker-viewer-emoji {
    top: -5.5rem
}

body.animation-level-2 .sticker-viewer-transformer {
    transition: transform var(--sticker-viewer-open-transition-out)
}

.sticker-viewer-transformer.is-switching {
    transform: translate(var(--translateX)) scale(1) !important;
    opacity: 1 !important
}

body.animation-level-2 .sticker-viewer-transformer.is-switching {
    transition: transform var(--sticker-viewer-switch-transition), opacity var(--sticker-viewer-switch-transition) !important
}

.sticker-viewer-transformer.is-switching:not(.backwards) {
    transform: scale(.4) translate(var(--translateX)) !important;
    opacity: 0 !important
}

.sticker-viewer-emoji {
    position: absolute;
    top: -3rem;
    transform: translate(var(--translateX)) scale(2)
}

.sticker-viewer-sticker {
    position: absolute
}

.sticker-viewer-emoji, .sticker-viewer-sticker, .sticker-viewer .emoji-animation {
    opacity: 0
}

body.animation-level-2 .sticker-viewer-emoji, body.animation-level-2 .sticker-viewer-sticker, body.animation-level-2 .sticker-viewer .emoji-animation {
    transition: opacity var(--sticker-viewer-open-transition-out)
}

.sticker-viewer .media-gif-wrapper .media-poster, .sticker-viewer .media-gif-wrapper .media-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.custom-emoji {
    display: inline;
    position: relative;
    width: var(--custom-emoji-size) !important;
    height: var(--custom-emoji-size) !important;
    min-width: var(--custom-emoji-size) !important;
    min-height: var(--custom-emoji-size) !important
}

.custom-emoji:before {
    content: " ";
    display: inline-block;
    width: inherit;
    height: inherit;
    min-width: inherit;
    min-height: inherit
}

.custom-emoji .media-sticker, .custom-emoji .rlottie {
    margin: 0;
    width: inherit !important;
    height: inherit !important;
    max-width: inherit !important;
    max-height: inherit !important;
    pointer-events: none;
    text-indent: -9999px
}

.custom-emoji-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.custom-emoji-renderer {
    pointer-events: none;
    position: absolute;
    inset: 0
}

.custom-emoji-placeholder {
    display: inline;
    width: var(--messages-custom-emoji-size);
    height: var(--messages-custom-emoji-size);
    vertical-align: middle;
    margin-top: -.125rem
}

.usernames-username-icon {
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 1.25rem;
    position: relative
}

.usernames-username-icon-svg {
    position: absolute;
    width: 51px;
    height: 51px;
    transform: scaleX(-1) rotate(270deg)
}

.usernames-username-icon-circle {
    fill: none;
    stroke-width: 2px;
    stroke: var(--color);
    stroke-linecap: round
}

body.animation-level-2 .usernames-username-icon-circle {
    transition: stroke-dasharray var(--transition-standard-in)
}

.usernames-username.active:not(.is-link) .usernames-username-status {
    color: var(--primary-color) !important
}

.usernames-username.active .usernames-username-icon {
    background-color: var(--primary-color)
}

.usernames-username.is-paid .usernames-username-icon {
    font-size: 1.625rem
}

.topics-slider {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.topics-container {
    --offset: 0;
    --width: 100%;
    background-color: var(--surface-color) !important;
    width: var(--width) !important
}

.topics-container.is-floating {
    --offset: 5.0625rem;
    --width: calc(100% - var(--offset));
    transform: translate(calc(100% * var(--reflect)));
    overflow: unset !important;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1;
    pointer-events: all;
    border-inline-start: 1px solid var(--border-color)
}

.topics-container.is-visible:not(.backwards) {
    transform: translate(0)
}

.topics-container.is-visible.animating {
    transition: transform var(--transition-standard-in)
}

.topics-container.is-visible.animating.backwards {
    transition: transform var(--transition-standard-out)
}

.topics-container .sidebar-header {
    padding: 0 .75rem
}

.topics-container .sidebar-header__title, .topics-container .sidebar-header__subtitle {
    padding-inline-start: .5rem
}

.topics-container .chatlist-chat {
    min-height: 4rem;
    padding-inline-start: .75rem
}

.topic-name .topic-icon {
    margin-inline-end: .25rem
}

.topic-name-button {
    --color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    padding: 0 .5rem;
    color: var(--color);
    font-weight: var(--font-weight-bold);
    position: relative;
    text-decoration: none !important;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.topic-name-button-container {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start
}

.topic-name-button .peer-title, .topic-name-button .topic-name {
    position: relative;
    pointer-events: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.topic-name-button:before {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: var(--color);
    opacity: .08;
    border-radius: 1.5rem
}

html.no-touch .topic-name-button:hover:before, html.no-touch .topic-name-button:active:before {
    opacity: .16
}

.topic-icon {
    --size: 1.25rem;
    --custom-emoji-size: var(--size);
    font-size: calc(var(--size) / 2);
    line-height: 1.875 !important;
    display: inline-flex;
    position: relative;
    justify-content: center;
    vertical-align: middle
}

.topic-icon-general {
    fill: var(--secondary-color);
    width: var(--size);
    height: var(--size)
}

.topic-icon-svg {
    position: absolute;
    width: inherit;
    height: inherit
}

.topic-icon-content {
    position: relative
}

.edit-topic-container .scrollable-y {
    display: flex;
    flex-direction: column
}

.edit-topic-icon {
    position: absolute
}

.edit-topic-icon .topic-icon {
    --size: 4rem
}

.edit-topic-icon-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.edit-topic-emoticons-container {
    flex: 1 1 auto
}

.edit-topic-emoticons-container .sidebar-left-section {
    padding: 0 !important;
    height: 100%
}

.edit-topic-emoticons-container .emoji-padding {
    display: flex;
    flex-direction: column
}

.edit-topic-emoticons-container .super-emoji-topic-icon .topic-icon {
    --size: var(--esg-emoji-size);
    --custom-emoji-size: inherit;
    margin-inline-start: calc((var(--custom-emoji-size) - var(--esg-emoji-size)) / 2)
}

.themes-container {
    display: flex;
    height: 6.5rem;
    position: relative;
    align-items: center
}

@media only screen and (min-width: 601px) {
    .themes-container {
        width: calc(100% + 1rem);
        margin: 0 -.5rem;
        padding: 0
    }
}

.themes-container:before, .themes-container:after {
    content: " ";
    display: block;
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto
}

.theme-container {
    height: calc(100% - .5rem);
    margin: 0 .25rem;
    border-radius: 10px;
    width: 4.5rem;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer
}

.theme-container:before {
    position: absolute;
    content: " ";
    inset: -4px;
    border-radius: 14px;
    border: 2px solid var(--primary-color);
    opacity: 0;
    transform: scale(.86)
}

html.is-safari .theme-container:before {
    transform: none !important
}

body.animation-level-2 .theme-container:before {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.theme-container.active {
    pointer-events: none
}

.theme-container.active:before {
    transform: scale(1);
    opacity: 1
}

.theme-container .background-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none
}

.theme-emoticon {
    position: absolute;
    bottom: .5rem;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    z-index: 1
}

html:not(.is-safari) .theme-emoticon {
    transform-origin: center bottom;
    transform: scale(1)
}

body.animation-level-2 .theme-emoticon {
    transition: transform var(--transition-standard-in)
}

.theme-bubble {
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 1.75rem;
    background-color: #fff;
    position: absolute;
    pointer-events: none
}

.theme-bubble.is-out {
    top: .5rem;
    right: .375rem;
    background-color: var(--light-filled-message-out-primary-color)
}

.theme-bubble.is-in {
    background-color: var(--message-background-color);
    top: 2rem;
    left: .375rem
}

@media print {
    html, body {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        background-color: var(--background-color) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    html {
        --message-highlighting-color: var(--secondary-color) !important
    }

    .bubble.is-date {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative
    }

    .whole, .emoji-animation-container, .bubble-hover-reaction {
        display: none !important
    }

    .printable {
        display: block !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        margin-bottom: 30px
    }
}

.movable-element {
    --size: .5rem;
    position: relative
}

.movable-element-resize-handler {
    position: absolute
}

.movable-element-resize-handler-side-n, .movable-element-resize-handler-side-s {
    left: 0;
    right: 0;
    height: var(--size);
    cursor: row-resize
}

.movable-element-resize-handler-side-e, .movable-element-resize-handler-side-w {
    top: 0;
    bottom: 0;
    width: var(--size);
    cursor: col-resize
}

.movable-element-resize-handler-side-n {
    top: 0
}

.movable-element-resize-handler-side-e {
    right: 0
}

.movable-element-resize-handler-side-s {
    bottom: 0
}

.movable-element-resize-handler-side-w {
    left: 0
}

.movable-element-resize-handler-side-nw, .movable-element-resize-handler-side-ne, .movable-element-resize-handler-side-sw, .movable-element-resize-handler-side-se {
    width: var(--size);
    height: var(--size);
    z-index: 1
}

.movable-element-resize-handler-side-ne, .movable-element-resize-handler-side-sw {
    cursor: nesw-resize
}

.movable-element-resize-handler-side-se, .movable-element-resize-handler-side-nw {
    cursor: nwse-resize
}

.movable-element-resize-handler-side-ne {
    top: 0;
    right: 0
}

.movable-element-resize-handler-side-se {
    right: 0;
    bottom: 0
}

.movable-element-resize-handler-side-sw {
    bottom: 0;
    left: 0
}

.movable-element-resize-handler-side-nw {
    top: 0;
    left: 0
}

.movable-element-overlay {
    position: absolute;
    inset: 0;
    z-index: 100
}

@keyframes wave {
    0% {
        transform: translate(-100%)
    }
    50% {
        transform: translate(100%)
    }
    to {
        transform: translate(100%)
    }
}

.shimmer {
    --opacity: .2
}

body.animation-level-0 .shimmer:before {
    content: unset
}

.shimmer:before {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, var(--opacity)) 50%, transparent 100%);
    animation: wave 2s cubic-bezier(.4, 0, .6, 1) infinite;
    pointer-events: none
}

.shimmer-once:before {
    animation-iteration-count: 1;
    animation-fill-mode: forwards
}

.shimmer-bright {
    --opacity: .4
}

.invite-link {
    border-radius: 10px;
    background-color: var(--background-color);
    position: relative;
    color: var(--primary-text-color);
    padding-inline: 1rem .25rem;
    height: 3rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.invite-link-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1 1 auto
}

.invite-link-container {
    padding: 0 .5rem;
    position: relative
}

.invite-link-dots {
    width: 320px !important;
    height: 32px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    pointer-events: none
}

.invite-link-menu {
    flex: 0 0 auto
}

.invite-link-button {
    margin-top: .5rem;
    height: 3rem;
    text-transform: uppercase
}

.invite-link-subtitle {
    text-align: center;
    margin: .75rem 0 .5rem;
    color: var(--primary-color);
    cursor: pointer
}

.is-markup {
    font-family: inherit !important
}

[data-markup*=bold] {
    font-weight: 700
}

[data-markup*=italic] {
    font-style: italic
}

[data-markup*=underline] {
    text-decoration-line: underline
}

[data-markup*=strikethrough] {
    text-decoration-line: line-through
}

[data-markup*=underline][data-markup*=strikethrough] {
    text-decoration-line: underline line-through
}

[data-markup*=monospace] {
    font-family: var(--font-monospace) !important
}

[data-markup*=spoiler] {
    background-color: var(--spoiler-draft-background-color)
}

.quote-like {
    --border-radius: .25rem;
    --primary-color: rgb(var(--peer-color-rgb));
    --primary-color-rgb: var(--peer-color-rgb);
    background-color: rgba(var(--primary-color-rgb), .1);
    overflow: hidden;
    border-radius: var(--border-radius);
    position: relative
}

.quote-like-hoverable {
    --ripple-color: rgba(var(--primary-color-rgb), .2);
    --ripple-duration: .4s;
    --ripple-start-scale: .4;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

html.no-touch .quote-like-hoverable:hover, html.no-touch .quote-like-hoverable:active {
    background-color: rgba(var(--primary-color-rgb), .2)
}

.quote-like-border:before {
    content: " ";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    flex: 0 0 auto;
    width: .1875rem;
    background: var(--peer-border-background, rgb(var(--peer-color-rgb)));
    z-index: 1
}

.quote-like-icon:after {
    position: absolute;
    top: .125rem;
    inset-inline-end: .1875rem;
    color: var(--primary-color);
    font-size: 78.571428%;
    line-height: 1
}

.quote-like-icon:after {
    content: "";
    font-family: tgico !important
}

.quote-like-collapse {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    cursor: pointer
}

.quote-like-collapse:after {
    position: relative;
    inset: auto;
    content: "";
    font-size: 110%;
    display: inline-block;
    transform: rotate(0)
}

body.animation-level-2 .quote-like-collapse:after {
    transition: transform var(--transition-standard-in)
}

.quote-like-collapsable {
    max-height: calc(var(--messages-secondary-line-height) * 3 + 2px)
}

body.animation-level-2 .quote-like-collapsable {
    transition: max-height var(--transition-standard-in)
}

.quote-like-collapsable.is-expanded {
    max-height: var(--quote-max-height)
}

.quote-like-collapsable.is-expanded .quote-like-collapse:after {
    transform: rotate(180deg)
}

.quote-like-collapsable:not(.is-truncated):not(.is-expanded) .quote-like-collapse {
    display: none
}

.quote-like.can-send-collapsed:after {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    text-align: end;
    cursor: pointer
}

.quote-like.can-send-collapsed[data-collapsed]:after {
    content: ""
}

.quote, [data-markup*=quote] {
    padding: 1px 0;
    padding-inline: .5625rem 1.125rem;
    margin: 2px 0;
    display: inline-block;
    font-size: var(--messages-secondary-text-size);
    line-height: var(--messages-secondary-line-height);
    white-space: pre-wrap;
    max-width: 100%;
    vertical-align: bottom
}

.quote-block, [data-markup*=quote] {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline-end: auto
}

.similar-channels-container {
    display: block;
    background-color: var(--surface-color);
    border-radius: 15px;
    height: 8.5rem;
    padding: .375rem 0 .25rem;
    margin-top: .625rem;
    position: relative
}

.similar-channels-container .scrollable {
    position: relative;
    display: flex
}

.similar-channels-notch {
    position: absolute;
    width: 19px;
    height: 7px;
    top: -7px;
    left: 50%;
    transform: translate(-50%)
}

.similar-channels-notch-path {
    fill: var(--surface-color)
}

.similar-channels-header {
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: .75rem .25rem;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold)
}

.similar-channels-header .btn-icon {
    font-size: 1.25rem;
    padding: .25rem
}

.similar-channels-list {
    display: flex;
    gap: .5rem
}

.similar-channels-list-margin {
    width: .25rem;
    flex: 0 0 auto
}

.similar-channels-channel {
    width: 4.75rem;
    height: 6.375rem;
    padding: .5rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative
}

html.no-touch .similar-channels-channel:hover, html.no-touch .similar-channels-channel:active {
    background-color: var(--light-secondary-text-color)
}

html.no-touch .similar-channels-channel:hover .similar-channels-channel-badge, html.no-touch .similar-channels-channel:active .similar-channels-channel-badge {
    border-color: var(--light-filled-secondary-text-color)
}

.similar-channels-channel.is-last {
    width: 6rem;
    color: var(--secondary-text-color)
}

.similar-channels-channel.is-last .similar-channels-channel-badge {
    background: var(--secondary-color) !important
}

.similar-channels-channel.is-last .similar-channels-channel-badge-icon {
    font-size: 9.5px
}

.similar-channels-channel.is-last .similar-channels-channel-name {
    max-width: 3.75rem
}

.similar-channels-channel-avatar {
    flex: 0 0 auto
}

.similar-channels-channel-avatar-stack {
    position: relative;
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    z-index: 0
}

.similar-channels-channel-avatar-stack-first, .similar-channels-channel-avatar-stack-middle, .similar-channels-channel-avatar-stack-last {
    position: absolute;
    top: 0;
    outline: 2px solid var(--surface-color)
}

.similar-channels-channel-avatar-stack-middle, .similar-channels-channel-avatar-stack-last {
    background-color: var(--secondary-color);
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.similar-channels-channel-avatar-stack-first {
    inset-inline-start: -.625rem;
    z-index: 3
}

.similar-channels-channel-avatar-stack-middle {
    z-index: 2
}

.similar-channels-channel-avatar-stack-last {
    inset-inline-end: -.625rem
}

.similar-channels-channel-name {
    margin-top: .25rem;
    font-size: var(--font-size-11);
    line-height: 13px;
    max-height: 1.875rem;
    text-align: center;
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.similar-channels-channel-badge {
    position: absolute;
    background-color: #000;
    top: 53px;
    height: 18px;
    border: 1.5px solid var(--surface-color);
    padding-inline: .1875rem .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    color: #fff;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    background-repeat: no-repeat;
    background-size: cover
}

.similar-channels-channel-badge-icon {
    font-size: 8.5px
}

.similar-channels-paywall {
    padding: 0 1rem 1rem;
    position: relative;
    z-index: 1
}

.similar-channels-paywall:before {
    content: " ";
    display: block;
    top: -6rem;
    right: 0;
    left: 0;
    height: 5rem;
    background: linear-gradient(0, var(--surface-color), transparent);
    position: absolute;
    z-index: -1;
    pointer-events: none
}

.similar-channels-paywall-button {
    margin: 1rem 0;
    text-transform: uppercase;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem
}

.similar-channels-paywall-button .button-icon {
    order: 3;
    font-size: 1.25rem
}

.similar-channels-paywall-subtitle {
    display: block;
    text-align: center;
    text-wrap: balance;
    font-size: var(--font-size-15);
    line-height: var(--line-height-15);
    color: var(--secondary-text-color)
}

.tooltip {
    position: fixed;
    padding: .5625rem 1rem;
    font-size: var(--font-size-15);
    line-height: calc(var(--font-size-15) + 5px);
    color: #fff;
    z-index: 5;
    word-break: break-word
}

.tooltip a {
    font-weight: var(--font-weight-bold);
    color: currentColor
}

.tooltip.mounted {
    transform: scale(.9)
}

.tooltip-background {
    content: " ";
    position: absolute;
    inset: 0;
    box-shadow: 0 2px 16px #0000003b;
    border-radius: 15px;
    z-index: -1
}

.tooltip-background, .tooltip-notch {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background-color: #1d1d1dbd
}

.night .tooltip-lighter .tooltip-background, .night .tooltip-lighter .tooltip-notch {
    background-color: #2d2d2dbd
}

.tooltip-part {
    opacity: 0
}

body.animation-level-2 .tooltip-part {
    transition: opacity var(--btn-menu-transition)
}

.tooltip-notch {
    position: absolute;
    width: 19px;
    height: 8px;
    left: var(--notch-offset);
    -webkit-clip-path: url(#tooltip-notch-clip);
    clip-path: url(#tooltip-notch-clip)
}

.tooltip-bottom .tooltip-notch {
    top: -7px
}

.tooltip-top .tooltip-notch {
    bottom: -7px;
    transform: scaleY(-1)
}

.tooltip-text {
    font-size: var(--font-size-14);
    line-height: calc(var(--font-size-14) + 2px)
}

.tooltip-with-icon .tooltip-text {
    padding-inline-start: 2.3125rem;
    margin-inline-start: -.1875rem;
    position: relative
}

.tooltip-icon {
    font-size: 1.5rem;
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%)
}

.tooltip-subtitle {
    margin-top: .125rem
}

body.animation-level-2 .tooltip.is-visible {
    transition: transform var(--btn-menu-transition)
}

.tooltip.is-visible:not(.backwards) {
    transform: scale(1)
}

.tooltip.is-visible:not(.backwards) .tooltip-part {
    opacity: 1
}

.topbar-search-container {
    display: flex;
    position: absolute;
    align-items: center;
    inset-block: 0;
    inset-inline-start: calc(var(--topbar-close-active-size) + var(--topbar-avatar-active-size) + var(--topbar-avatar-close-gap) + 1.8125rem);
    inset-inline-end: 1rem;
    gap: .5rem;
    z-index: 1
}

@media only screen and (max-width: 600px) {
    .topbar-search-container {
        inset-inline: .5rem;
        background-color: var(--surface-color)
    }
}

@media only screen and (min-width: 1276px) {
    .topbar-search-container {
        transition: padding-inline-end var(--transition-standard-out)
    }

    body.is-right-column-shown .topbar-search-container {
        padding-inline-end: var(--right-column-width);
        transition: padding-inline-end var(--transition-standard-in)
    }

    body.animation-level-0 .topbar-search-container {
        transition: none
    }
}

.topbar-search-left-container {
    --border-radius: 21px;
    --height: 42px;
    flex: 1 1 auto;
    align-self: flex-start;
    margin-top: 7px;
    position: relative;
    max-width: 100%;
    width: 1px
}

.topbar-search-left-background {
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px #0000;
    border-radius: var(--border-radius);
    background-color: var(--old-input-background-color)
}

body.animation-level-2 .topbar-search-left-background {
    transition: box-shadow var(--transition-standard-in), background-color var(--transition-standard-in)
}

.is-focused .topbar-search-left-background {
    box-shadow: 0 0 10px #00000040;
    background-color: var(--surface-color)
}

.topbar-search-left-delimiter {
    height: 1px;
    margin: 0 .5rem .5rem;
    background-color: var(--border-color);
    border-radius: 1px;
    position: sticky;
    top: 0;
    z-index: 1
}

.topbar-search-left-chatlist {
    background: none;
    padding: 0 .5rem;
    position: absolute;
    border-radius: 10px
}

.topbar-search-left-chatlist .navigable-list {
    border-radius: inherit
}

.topbar-search-left-collapsable {
    height: 0px;
    overflow: hidden;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: relative
}

body.animation-level-2 .topbar-search-left-collapsable {
    transition: height var(--transition-standard-in)
}

.topbar-search-left-results {
    max-height: 271px;
    max-width: 100%
}

.topbar-search-left-results-padding {
    height: 8px
}

.topbar-search-left-results-empty {
    text-align: center;
    font-size: var(--font-size-16);
    color: var(--secondary-text-color);
    line-height: 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.topbar-search-left-sender {
    border-radius: 10px
}

.topbar-search-left-reactions {
    --margin-vertical: 0px;
    --margin-horizontal: .5625rem;
    margin-top: calc(var(--margin-vertical) * -1);
    flex-wrap: nowrap;
    flex: 0 0 auto
}

.topbar-search-left-reactions-padding {
    width: 1rem
}

@media only screen and (max-width: 600px) {
    .topbar-search-left-reactions-padding {
        width: .5rem
    }
}

.topbar-search-left-reactions-scrollable {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px
}

.topbar-search-left-reactions-padding, .topbar-search-left-reactions .reaction-tag {
    flex: 0 0 auto
}

.topbar-search-left-search-types {
    display: flex;
    gap: .5rem
}

.topbar-search-left-search-types .selector-user {
    margin: 0
}

.topbar-search-left-search-types .selector-user-avatar-close {
    display: none
}

.topbar-search-left-search-types .selector-user.active {
    background-color: var(--primary-color) !important;
    color: #fff
}

html.no-touch .topbar-search-left-search-types .selector-user:hover, html.no-touch .topbar-search-left-search-types .selector-user:active {
    background-color: var(--light-primary-color)
}

.topbar-search-right-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 0 0 auto
}

.topbar-search-right-filter {
    width: 3rem;
    height: 2.5rem;
    opacity: 1;
    position: relative
}

body.animation-level-2 .topbar-search-right-filter {
    transition: width var(--transition-standard-in), opacity var(--transition-standard-in)
}

.topbar-search-right-filter.is-hidden {
    width: 0;
    opacity: 0;
    pointer-events: none
}

.topbar-search-right-filter-button {
    position: absolute;
    inset-inline-end: .5rem
}

.topbar-search-input {
    border: none;
    background: none;
    padding-inline-start: var(--padding-horizontal-start);
    padding-inline-end: 136px
}

@media only screen and (max-width: 600px) {
    .topbar-search-input {
        padding-inline-end: 3.25rem
    }
}

body.animation-level-2 .topbar-search-input {
    transition: padding-inline-start .2s ease-in-out
}

.topbar-search-input-container {
    --icon-left-offset: 1rem;
    --border-width: 0px;
    --padding-horizontal: calc(var(--height) + 8px);
    --padding-horizontal-start: calc(var(--padding-horizontal) + var(--padding-placeholder, 0px) + var(--padding-sender, 0px));
    border-radius: var(--border-radius);
    margin: 0
}

.topbar-search-input-container .input-search-placeholder {
    inset-inline-start: calc(var(--padding-horizontal-start) + var(--padding-hashtag))
}

body.animation-level-2 .topbar-search-input-container .input-search-placeholder {
    transition: inset-inline-start .2s ease-in-out
}

.topbar-search-input-container .input-search-part {
    --max-opacity: .6 !important;
    color: var(--secondary-text-color) !important
}

.topbar-search-input-container .input-search-clear {
    margin-inline-end: .4375rem
}

.topbar-search-input-container .input-search-back {
    pointer-events: all
}

.topbar-search-input-container .preloader-path-new {
    stroke: var(--secondary-text-color) !important;
    opacity: .6
}

.topbar-search-input-container.with-arrow-back .preloader-container {
    inset-inline: auto var(--icon-left-offset)
}

.topbar-search-input-from {
    position: absolute;
    inset-inline-start: var(--padding-horizontal);
    color: var(--primary-text-color);
    pointer-events: none;
    opacity: 0
}

body.animation-level-2 .topbar-search-input-from {
    transition: opacity .2s ease-in-out
}

.topbar-search-input-from.is-visible {
    opacity: 1
}

.topbar-search-input-entity {
    position: absolute;
    inset-inline-start: calc(var(--padding-horizontal) + var(--padding-placeholder));
    margin: 0;
    pointer-events: all;
    z-index: 1
}

.topbar-search-input-arrow {
    margin: 0 !important
}

.topbar-search-input-tools {
    position: absolute;
    inset-inline-end: 0;
    height: var(--height);
    z-index: 1;
    display: flex;
    align-items: center
}

.topbar-search-input-tools .input-search-part {
    position: relative
}

.media-editor__overlay {
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-background-color);
    transition: .2s;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-text-color)
}

.media-editor__overlay--hidden {
    opacity: 0
}

.media-editor__overlay.night {
    --primary-color: inherit;
    --dark-primary-color: inherit;
    --primary-color-rgb: inherit
}

.media-editor__container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1682px;
    max-height: 1080px;
    background-color: #000;
    box-shadow: 0 0 4px 1px #00000040;
    display: flex
}

@media (max-width: 800px) {
    .media-editor__container {
        padding-bottom: 100px
    }
}

.media-editor__main-canvas {
    position: relative;
    background-color: #000;
    flex: 1;
    overflow: hidden
}

.media-editor__main-canvas canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.media-editor__toolbar {
    --current-scroll-top: 8px;
    background-color: #212121;
    flex: 400px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity .2s
}

.media-editor__toolbar-draggable {
    display: none;
    height: 7px;
    width: 100%;
    align-items: end;
    justify-content: center
}

.media-editor__toolbar-draggable:before {
    content: "";
    display: block;
    height: 3px;
    border-radius: 3px;
    width: 25%;
    background-color: #aaa
}

@media (max-width: 800px) {
    .media-editor__toolbar {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 0;
        width: 100vw;
        max-width: 400px;
        height: 50vh;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px
    }

    .media-editor__toolbar-draggable {
        display: flex
    }
}

.media-editor__tabs {
    position: relative;
    display: flex;
    padding: 0 12px;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 4px #0000001a
}

.media-editor__tabs-item {
    padding: 4px
}

.media-editor__tabs-item--active .btn-icon {
    color: var(--primary-color)
}

.media-editor__tabs-underline {
    --left: 36px;
    position: absolute;
    left: var(--left);
    bottom: 0;
    transform: translate(-50%);
    width: 24px;
    height: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: var(--primary-color);
    transition: .2s
}

.media-editor__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-shrink: 0;
    position: relative;
    height: 56px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 20px
}

.media-editor__topbar-title {
    flex: 1
}

@media (max-width: 800px) {
    .media-editor__topbar-title {
        display: none
    }
}

.media-editor__topbar-history-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

@media (max-width: 800px) {
    .media-editor__topbar-history-controls {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }
}

.media-editor__topbar-done {
    display: none;
    color: var(--primary-color);
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer
}

.media-editor__topbar-done--disabled {
    color: rgba(var(--primary-color-rgb), .2);
    cursor: default;
    pointer-events: none
}

@media (max-width: 800px) {
    .media-editor__topbar-done {
        display: block
    }
}

.media-editor__tab-content {
    position: relative;
    flex: 1
}

.media-editor__tab-content > * {
    position: relative;
    height: 100%;
    transition: .2s
}

.media-editor__tab-content-scrollable-content {
    height: 100%;
    padding: 8px
}

@media (min-width: 801px) {
    .media-editor__tab-content-scrollable-content:after {
        content: "";
        display: block;
        padding-top: 60px
    }
}

.media-editor__tab-content--exit {
    position: absolute;
    top: 0;
    width: 100%
}

.media-editor__tab-content--go-left {
    transform: translate(-100%)
}

.media-editor__tab-content--go-right {
    transform: translate(100%)
}

.media-editor__range-input {
    padding: 0 16px;
    --color: var(--primary-color)
}

.media-editor__range-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 500
}

.media-editor__range-input:not(.media-editor__range-input--passive):not(.media-editor__range-input--has-value) .media-editor__range-input-value {
    color: #717579
}

.media-editor__range-input--passive {
    color: #aaa
}

.media-editor__range-input--has-value .media-editor__range-input-value {
    color: var(--primary-color)
}

.media-editor__range-input--bright-shadow .media-editor__range-input-thumb--shadow, .media-editor__range-input--bright-shadow .media-editor__range-input-progress--shadow {
    box-shadow: 0 0 2px 1px #fffc
}

.media-editor__range-input-wrapper {
    position: relative;
    height: 4px;
    border-radius: 2px
}

.media-editor__range-input-thumb {
    pointer-events: none;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: calc((100% - 20px) * var(--normalized) + 10px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color);
    transition: width .1s, height .1s, box-shadow .1s
}

.media-editor__range-input-wrapper:active .media-editor__range-input-thumb {
    width: 24px;
    height: 24px
}

.media-editor__range-input-progress-background {
    pointer-events: none;
    position: absolute;
    height: 4px;
    border-radius: 2px;
    background-color: #2f2f2f;
    left: 0;
    width: 100%
}

.media-editor__range-input-progress {
    pointer-events: none;
    position: absolute;
    height: 4px;
    border-radius: 2px;
    width: var(--w);
    left: var(--bar-left);
    right: var(--bar-right);
    background-color: var(--color);
    transition: box-shadow .1s
}

.media-editor__range-input-progress--shadow {
    background-color: transparent;
    left: 0;
    width: 100%;
    right: 0
}

.media-editor__range-input input {
    opacity: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -12px;
    bottom: -12px;
    cursor: pointer
}

.media-editor__label {
    color: #aaa;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    padding: 14px 16px
}

.media-editor__large-button {
    --bg-color: #212121;
    height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: .1s;
    overflow: hidden;
    background-color: var(--bg-color)
}

.media-editor__large-button:hover:not(.media-editor__large-button--active) {
    --bg-color: #262626
}

.media-editor__large-button--active {
    --bg-color: #2b2b2b
}

.media-editor__crop-item {
    gap: 32px
}

.media-editor__crop-item .tgico {
    font-size: 24px
}

.media-editor__crop-item svg {
    width: 24px;
    height: 24px;
    flex: 24px 0 0
}

.media-editor__crop-item-icon--rotated {
    transform: rotate(90deg)
}

.media-editor__crop-grid {
    display: grid;
    grid-template-columns:1fr 1fr
}

.media-editor__color-picker-swatches {
    position: relative;
    display: grid;
    grid-template-columns:repeat(9, 1fr);
    place-items: space-between;
    padding: 4px 8px
}

.media-editor__color-picker-swatch {
    --color-rgb: 255 255 255;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .1s;
    overflow: hidden
}

.media-editor__color-picker-swatch-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(var(--color-rgb))
}

.media-editor__color-picker-swatch:hover:not(.media-editor__color-picker-swatch--active) {
    background-color: rgba(var(--color-rgb)/.05)
}

.media-editor__color-picker-swatch--active {
    background-color: rgba(var(--color-rgb)/.1)
}

.media-editor__color-picker-swatch--gradient .media-editor__color-picker-swatch-color {
    background: radial-gradient(#fff, transparent 75%), conic-gradient(red, #ff00bf, #7f00ff, #0040ff, #0ff, #00ff40, #80ff00, #ffbf00, red)
}

.media-editor__color-picker:not(.media-editor__color-picker--collapsed) .media-editor__color-picker-swatch:not(.media-editor__color-picker-swatch--gradient) {
    opacity: 0;
    pointer-events: none
}

.media-editor__color-picker-slider {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    transition: .2s
}

.media-editor__color-picker--collapsed .media-editor__color-picker-slider {
    opacity: 0;
    pointer-events: none
}

.media-editor__color-picker-layout {
    display: flex;
    gap: 24px;
    --padding-top: 12px;
    padding: 20px 16px 16px;
    height: calc(var(--picker-height) + 36px)
}

.media-editor__color-picker-layout-wrapper {
    transition: .2s;
    height: calc(var(--picker-height) + 36px);
    overflow: hidden
}

.media-editor__color-picker--collapsed .media-editor__color-picker-layout-wrapper {
    pointer-events: none;
    opacity: 0;
    height: 0px
}

.media-editor__color-picker-box {
    flex-shrink: 0;
    flex-grow: 0
}

.media-editor__color-picker-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.media-editor__toggle-group-row {
    display: flex;
    justify-content: space-between;
    margin: 16px 0
}

.media-editor__toggle-group {
    display: flex
}

.media-editor__toggle-button {
    position: relative;
    display: flex;
    padding: 12px 15px;
    border-radius: 10px;
    overflow: hidden;
    font-size: 24px;
    cursor: pointer;
    transition: .1s
}

.media-editor__toggle-button:hover:not(.media-editor__toggle-button--active) {
    background-color: #262626
}

.media-editor__toggle-button--active {
    background-color: #2b2b2b
}

.media-editor__brush-button-svg-wrapper {
    color: #38a359;
    position: relative;
    width: 84px;
    height: 48px;
    line-height: 1;
    overflow: hidden;
    transition: .2s
}

.media-editor__brush-button-svg-wrapper svg {
    position: absolute;
    right: 2px;
    width: 120px;
    top: 0
}

.media-editor__brush-button-svg-wrapper:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 16px;
    height: 100%;
    background: linear-gradient(to right, var(--bg-color), transparent);
    transition: .1s
}

.media-editor__large-button--active .media-editor__brush-button-svg-wrapper {
    width: 120px
}

.media-editor__stickers-container {
    padding: 8px
}

.media-editor__stickers-container-scrollable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.media-editor__stickers-thumb-list-scrollable {
    height: 48px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background-color: #212121;
    z-index: 2
}

.media-editor__stickers-thumb-list-scrollable--hidden {
    opacity: 0;
    pointer-events: none
}

.media-editor__stickers-thumb-list-scrollable--has-scroll {
    top: 100%;
    box-shadow: 0 2px 4px #0000001a
}

@media (max-width: 800px) {
    .media-editor__stickers-thumb-list-scrollable--has-scroll {
        top: calc(100% - 1px)
    }
}

.media-editor__stickers-thumb-list {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    height: 48px
}

.media-editor__stickers-thumb-list > * {
    flex: 30px 0 0
}

.media-editor__stickers-recent-button {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: .1s
}

.media-editor__stickers-recent-button > span {
    z-index: 0
}

.media-editor__stickers-recent-button--active {
    background-color: #2b2b2b
}

.media-editor__stickers-recent-button:before {
    position: absolute;
    content: "";
    display: block;
    inset: -4px;
    border-radius: 8px
}

.media-editor__stickers-recent-button--active:before, .media-editor__stickers-recent-button:hover:before {
    background-color: #262626
}

.media-editor__sticker-search {
    background-color: #2b2b2b;
    border-radius: 20px;
    overflow: hidden
}

.media-editor__stickers-set-thumb {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 1px;
    transition: .1s;
    cursor: pointer
}

.media-editor__stickers-set-thumb:before {
    position: absolute;
    content: "";
    display: block;
    inset: -4px;
    border-radius: 8px
}

.media-editor__stickers-set-thumb--active:before, .media-editor__stickers-set-thumb:hover:before {
    background-color: #262626
}

.media-editor__stickers-grid {
    display: grid;
    grid-template-columns:repeat(5, 70px);
    gap: 6px;
    padding: 0 5px
}

.media-editor__stickers-grid-item {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    cursor: pointer
}

.media-editor__stickers-grid-item:hover {
    background-color: #262626
}

.media-editor__crop-handles {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .3)
}

.media-editor__crop-handles-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000e6
}

.media-editor__crop-handles-circle {
    position: absolute;
    background-color: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    --offset: -5px
}

@media (max-width: 800px) {
    .media-editor__crop-handles-circle {
        width: 12px;
        height: 12px;
        --offset: -7px
    }

    .media-editor__crop-handles-circle:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 24px;
        width: 24px;
        transform: translate(-50%, -50%)
    }
}

.media-editor__crop-handles-circle--nw {
    cursor: nw-resize;
    left: var(--offset);
    top: var(--offset)
}

.media-editor__crop-handles-circle--ne {
    cursor: ne-resize;
    right: var(--offset);
    top: var(--offset)
}

.media-editor__crop-handles-circle--sw {
    cursor: sw-resize;
    left: var(--offset);
    bottom: var(--offset)
}

.media-editor__crop-handles-circle--se {
    cursor: se-resize;
    right: var(--offset);
    bottom: var(--offset)
}

.media-editor__crop-handles-circle--anti-flicker:before {
    cursor: grabbing;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 12px;
    width: 12px;
    transform: translate(-50%, -50%)
}

.media-editor__crop-handles-side {
    position: absolute;
    background-color: transparent
}

.media-editor__crop-handles-side--w, .media-editor__crop-handles-side--e {
    width: 8px;
    height: 100%;
    top: 0;
    --amount: -4px
}

@media (max-width: 800px) {
    .media-editor__crop-handles-side--w, .media-editor__crop-handles-side--e {
        --amount: -12px;
        width: 24px
    }
}

.media-editor__crop-handles-side--w {
    cursor: w-resize;
    left: var(--amount)
}

.media-editor__crop-handles-side--e {
    cursor: e-resize;
    right: var(--amount)
}

.media-editor__crop-handles-side--n, .media-editor__crop-handles-side--s {
    height: 8px;
    width: 100%;
    left: 0;
    --amount: -4px
}

@media (max-width: 800px) {
    .media-editor__crop-handles-side--n, .media-editor__crop-handles-side--s {
        --amount: -12px;
        height: 24px
    }
}

.media-editor__crop-handles-side--n {
    cursor: n-resize;
    top: var(--amount)
}

.media-editor__crop-handles-side--s {
    cursor: s-resize;
    bottom: var(--amount)
}

.media-editor__crop-handles-line-v {
    position: absolute;
    background-color: #ffffff4d;
    width: 1px;
    height: 100%;
    top: 0;
    transform: translate(-50%)
}

.media-editor__crop-handles-line-h {
    position: absolute;
    background-color: #ffffff4d;
    width: 100%;
    height: 1px;
    left: 0;
    transform: translateY(-50%)
}

.media-editor__rotation-wheel {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 42px;
    width: 632px;
    max-width: 100%
}

.media-editor__rotation-wheel-button .tgico {
    color: #fff
}

.media-editor__rotation-wheel-labels {
    display: flex;
    gap: 18px
}

.media-editor__rotation-wheel-label {
    width: 24px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 16px;
    color: #717579
}

.media-editor__rotation-wheel-label-number {
    position: relative
}

.media-editor__rotation-wheel-label-number:after {
    position: absolute;
    display: block;
    content: "°";
    right: 0;
    top: 0;
    transform: translate(100%)
}

.media-editor__rotation-wheel-dots {
    display: flex;
    gap: 4px
}

.media-editor__rotation-wheel-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #fff;
    opacity: .2
}

.media-editor__rotation-wheel-dot:nth-child(7n) {
    opacity: .5
}

.media-editor__rotation-wheel-swiper {
    --moved: 0px;
    position: absolute;
    width: 568px;
    height: 100%;
    left: calc(50% + var(--moved));
    top: 0;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.media-editor__rotation-wheel-swiper-wrapper {
    height: 100%;
    position: relative;
    flex: 1;
    /*-webkit-mask-image: url(assets/img/media-editor-rotation-wheel-mask.svg);*/
    /*mask-image: url(assets/img/media-editor-rotation-wheel-mask.svg);*/
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.media-editor__rotation-wheel-value {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%);
    width: 24px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    pointer-events: none
}

.media-editor__rotation-wheel-value-number {
    position: relative
}

.media-editor__rotation-wheel-value-number:after {
    position: absolute;
    display: block;
    content: "°";
    right: 0;
    top: 0;
    transform: translate(100%)
}

.media-editor__rotation-wheel-arrow {
    position: absolute;
    left: 50%;
    top: 26px;
    width: 6px;
    height: 4px;
    transform: translate(-50%);
    pointer-events: none
}

.media-editor__resizable-layers {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    pointer-events: none
}

.media-editor__resizable-layers-inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transition: opacity .2s
}

.media-editor__resizable-layers--active {
    pointer-events: initial
}

.media-editor__text-layer {
    position: relative;
    display: flex;
    flex-direction: column;
    line-height: 1.33em;
    text-wrap: nowrap;
    pointer-events: initial;
    cursor: text
}

.media-editor__text-layer-layout {
    display: flex;
    align-items: var(--align-items);
    flex-direction: column;
    text-wrap: nowrap;
    outline: none
}

.media-editor__text-layer-layout > div {
    position: relative;
    padding: 0 .2em;
    height: 1.33em
}

.media-editor__text-layer--with-bg .media-editor__text-layer-layout > div {
    padding: 0 .3em;
    min-width: 2em;
    display: flex;
    justify-content: var(--align-items)
}

.media-editor__text-layer-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.media-editor__text-layer-background--as-layout {
    display: flex;
    align-items: var(--align-items);
    flex-direction: column;
    text-wrap: nowrap;
    outline: none
}

.media-editor__text-layer-background--as-layout > div {
    position: relative;
    line-height: 1.33em;
    padding: 0 .2em;
    height: 1.33em
}

.media-editor__text-layer-svg-outline {
    pointer-events: none;
    position: absolute;
    left: -.35em;
    top: 0;
    line-height: 1
}

.media-editor__text-layer-svg-outline text {
    font-style: normal;
    fill: #fff;
    fill-opacity: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
    font-family: Roboto
}

.media-editor__resize-handles-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.media-editor__resizable-container {
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--rotation)) scale(var(--scale));
    padding: 10px 16px;
    pointer-events: initial;
    cursor: grab
}

.media-editor__resizable-container-handles {
    --opacity: 1;
    --pointer-events: auto;
    position: absolute;
    transform: translate(-50%, -50%) rotate(var(--rotation))
}

.media-editor__resizable-container-circle {
    position: absolute;
    background-color: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    opacity: var(--opacity);
    pointer-events: var(--pointer-events)
}

@media (max-width: 800px) {
    .media-editor__resizable-container-circle {
        width: 12px;
        height: 12px
    }

    .media-editor__resizable-container-circle:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 24px;
        width: 24px;
        transform: translate(-50%, -50%)
    }
}

.media-editor__resizable-container-circle--anti-flicker:before {
    cursor: grabbing;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 12px;
    width: 12px;
    transform: translate(-50%, -50%)
}

.media-editor__resizable-container-border {
    position: absolute;
    background-repeat: repeat;
    background-position: center;
    opacity: var(--opacity)
}

.media-editor__resizable-container-border--vertical {
    background-size: 1px 9px;
    /*background-image: url(assets/img/media-editor-border-part-vertical.svg);*/
    top: 0;
    width: 1px;
    height: 100%
}

@media (max-width: 800px) {
    .media-editor__resizable-container-border--vertical {
        background-size: 3px 18px;
        width: 3px
    }
}

.media-editor__resizable-container-border--horizontal {
    background-size: 9px 1px;
    /*background-image: url(assets/img/media-editor-border-part.svg);*/
    left: 0;
    height: 1px;
    width: 100%
}

@media (max-width: 800px) {
    .media-editor__resizable-container-border--horizontal {
        background-size: 18px 18px;
        height: 3px
    }
}

.media-editor__brush-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity .2s
}

.media-editor__brush-canvas--active {
    pointer-events: initial;
    cursor: crosshair
}

.media-editor__brush-canvas--invisible {
    visibility: hidden;
    pointer-events: none
}

.media-editor__preview-brush-size {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    --color: 230, 230, 230;
    background-color: #fff;
    box-shadow: 0 0 4px #00000040
}

@media (max-width: 800px) {
    .media-editor__preview-brush-size {
        top: 45%
    }
}

.media-editor__sticker-layer-content {
    position: relative;
    width: 200px;
    height: 200px
}

.media-editor__finish-button {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--primary-color);
    box-shadow: 0 1px 4px #00000040;
    border-radius: 50%;
    cursor: pointer;
    transition: .1s
}

.media-editor__finish-button--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, 4px)
}

.media-editor__finish-button:hover {
    background-color: var(--dark-primary-color)
}

@media (max-width: 800px) {
    .media-editor__finish-button {
        display: none
    }
}

.media-editor__inherit-color {
    color: var(--primary-text-color)
}

.media-editor__inherit-color.night {
    --primary-color: inherit
}

.folders-sidebar {
    position: relative;
    flex: 5rem 0 0;
    display: flex;
    flex-direction: column;
    --background: #212121;
    --background-hover: #272727;
    background-color: var(--background);
    color: #717579;
    z-index: 4;
    --folder-item-ripple-color: rgba(255, 255, 255, .08)
}

.night .folders-sidebar {
    --background: #141414;
    --background-hover: #1b1b1b
}

@media only screen and (max-width: 925px) {
    .folders-sidebar {
        display: none
    }
}

body:not(.has-folders-sidebar) .folders-sidebar {
    display: none
}

.folders-sidebar__scrollable {
    --border-color: rgba(255, 255, 255, .2)
}

.night .folders-sidebar__scrollable {
    --border-color: rgba(255, 255, 255, .1)
}

.folders-sidebar__scrollable-position {
    position: relative;
    flex: 1;
    --scrollbar-color: rgba(255, 255, 255, .2)
}

.folders-sidebar__folder-item {
    --ripple-color: var(--folder-item-ripple-color) !important;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background);
    flex-direction: column;
    gap: .375rem;
    padding: .75rem 0;
    min-height: 3.5rem;
    font-size: 10px;
    line-height: 12px;
    font-weight: var(--font-weight-bold);
    cursor: pointer
}

html.no-touch .folders-sidebar__folder-item:hover, html.no-touch .folders-sidebar__folder-item:active {
    --background: var(--background-hover)
}

.folders-sidebar__folder-item-icon {
    font-size: 1.875rem
}

.folders-sidebar__folder-item-badge {
    position: absolute;
    top: 6px;
    right: 19px;
    font-size: 12px;
    line-height: 18px !important;
    box-shadow: 0 0 0 1px var(--background);
    transition: none !important
}

.folders-sidebar__folder-item-badge.badge-gray {
    background-color: #717579
}

.folders-sidebar__folder-item-name {
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.folders-sidebar__folder-item--selected {
    color: var(--primary-color)
}

.folders-sidebar__menu-button .folders-sidebar__folder-item-icon {
    font-size: 1.5rem
}

.folders-sidebar__menu-button .btn-menu {
    inset-inline: 3rem auto
}

.folders-sidebar .btn-new-menu {
    display: none;
    position: absolute !important;
    bottom: 1.25rem;
    left: 50%;
    transform: translate(-50%) !important
}

.folders-sidebar .btn-new-menu .btn-menu.top-left {
    --transform-origin-x: var(--transform-origin-inline-start);
    inset-inline: 0 auto;
    inset-block: auto 120%
}

@media only screen and (min-width: 926px) {
    html:has(#column-left.is-collapsed) .folders-sidebar .btn-new-menu {
        display: flex
    }
}

.folders-sidebar__add-folders-button {
    position: absolute;
    top: calc(var(--offset) * 1px);
    right: 0;
    transform: translate(100%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    width: 4.5rem;
    height: 5.5rem;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: var(--background);
    /*-webkit-mask-image: url(/assets/img/add-chats-to-folder-shape.svg);*/
    /*mask-image: url(/assets/img/add-chats-to-folder-shape.svg);*/
    font-size: 10px;
    line-height: 12px;
    font-weight: var(--font-weight-bold);
    color: #aaa;
    border-left: 1px solid rgba(0, 0, 0, .1);
    transition: opacity .2s;
    cursor: pointer
}

html.no-touch .folders-sidebar__add-folders-button:hover, html.no-touch .folders-sidebar__add-folders-button:active {
    --background: var(--background-hover)
}

:has(#column-left.is-collapsed:not(.has-open-tabs)) .folders-sidebar__add-folders-button {
    display: flex
}

body:has(.hide-add-folders) .folders-sidebar__add-folders-button {
    opacity: 0 !important
}

.folders-sidebar__add-folders-button-icon {
    font-size: 30px
}

.limit-line {
    height: 2rem;
    border-radius: 10px;
    font-weight: var(--font-weight-bold);
    display: flex;
    overflow: hidden;
    position: relative
}

.limit-line.is-alone, .limit-line-container {
    --limit-progress: 50%
}

.limit-line-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .75rem .5rem;
    position: relative
}

.limit-line-container .limit-line {
    align-self: stretch;
    margin: 3rem 0 0
}

.limit-line-hint {
    --translateX: 0;
    --height: 2rem;
    height: var(--height);
    border-radius: calc(var(--height) / 2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    transform: scale(.6) translate(-280px, 16px) rotate(-30deg)
}

body.animation-level-2 .limit-line-hint {
    transition: transform .3s cubic-bezier(.12, 1.1, .56, 1.2)
}

.limit-line-hint.active {
    transform: scale(1) translate(var(--translateX)) rotate(0)
}

.limit-line-hint:not(.is-locked) {
    --translateX: -50%;
    left: var(--limit-progress);
    padding: 0 .75rem;
    position: absolute;
    background: linear-gradient(73.4deg, #6c93ff -7.21%, #976fff 114.57%, #df69d1 241.52%);
    background-size: 200px var(--height)
}

.limit-line-hint:not(.is-locked):after {
    display: block;
    content: " ";
    width: 100%;
    height: 9px;
    position: absolute;
    bottom: -9px;
    -webkit-clip-path: path("M0 0H26H24.4853C22.894 0 21.3679 0.632141 20.2426 1.75736L14.4142 7.58579C13.6332 8.36684 12.3668 8.36683 11.5858 7.58579L5.75736 1.75736C4.63214 0.632139 3.10602 0 1.51472 0H0Z");
    clip-path: path("M0 0H26H24.4853C22.894 0 21.3679 0.632141 20.2426 1.75736L14.4142 7.58579C13.6332 8.36684 12.3668 8.36683 11.5858 7.58579L5.75736 1.75736C4.63214 0.632139 3.10602 0 1.51472 0H0Z");
    background: inherit;
    background-size: inherit;
    background-position-x: calc(-50% - 86px);
    background-repeat: no-repeat;
    left: 50%;
    margin-left: -13px
}

.limit-line-hint.is-locked {
    --height: 2.75rem;
    padding: 0 1.25rem 0 1rem;
    margin-right: -.25rem;
    background-color: var(--primary-color)
}

.limit-line-hint.is-start {
    left: 0;
    border-bottom-left-radius: 0
}

.limit-line-hint.is-start:after {
    transform: scaleX(-1);
    left: 0;
    transform-origin: left center;
    margin-left: 20.6px;
    background-position-x: -5%
}

.limit-line-hint.is-end {
    right: 0;
    left: auto;
    border-bottom-right-radius: 0;
    background-position-x: 100% !important;
    min-width: 66px
}

.limit-line-hint.is-end:after {
    left: 100%;
    margin-left: -20.6px;
    background-position-x: 134%
}

.limit-line-hint.is-end, .limit-line-hint.is-start {
    --translateX: 0;
    background: linear-gradient(84.4deg, #6c93ff -4.85%, #976fff 51.72%, #df69d1 110.7%);
    background-size: 200px var(--height)
}

body.animation-level-2 .limit-line-hint.is-end, body.animation-level-2 .limit-line-hint.is-start {
    transition: transform .3s cubic-bezier(.12, 1.1, .56, 1.1)
}

.limit-line-hint.is-end:after, .limit-line-hint.is-start:after {
    height: 12px;
    bottom: -11.3px;
    -webkit-clip-path: path("M8.44528 0.5H20.5V10.1943C20.5 10.9154 19.9154 11.5 19.1943 11.5C18.8178 11.5 18.4597 11.3375 18.2117 11.0541L10.2274 1.92918C9.75146 1.38523 9.18812 0.924478 8.56057 0.565879L8.44528 0.5Z");
    clip-path: path("M8.44528 0.5H20.5V10.1943C20.5 10.9154 19.9154 11.5 19.1943 11.5C18.8178 11.5 18.4597 11.3375 18.2117 11.0541L10.2274 1.92918C9.75146 1.38523 9.18812 0.924478 8.56057 0.565879L8.44528 0.5Z")
}

.limit-line-hint-icon {
    font-size: 1.25rem;
    margin-right: .25rem;
    display: flex
}

.limit-line-part {
    color: var(--primary-text-color);
    background: var(--limit-background, var(--limit-line-empty-background));
    flex: 1 1 0;
    padding: 0 .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.limit-line-absolute {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) var(--limit-progress), rgba(0, 0, 0, 0) calc(var(--limit-progress) + .01%))
}

.limit-line-filled {
    color: #fff;
    --limit-background: linear-gradient(84.4deg, #6C93FF -4.85%, #976FFF 51.72%, #DF69D1 110.7%)
}

.animated-super-row {
    --translateY: 100%;
    position: absolute;
    inset: 0;
    transition: transform var(--pm-transition), opacity var(--pm-transition)
}

body.animation-level-0 .animated-super-row {
    transition: none
}

.animated-super-row.is-hiding {
    opacity: 0
}

.animated-super-row.is-hiding.from-top {
    transform: translate3d(0, calc(var(--translateY) * -1), 0)
}

.animated-super-row.is-hiding.from-bottom {
    transform: translate3d(0, var(--translateY), 0)
}

.animated-counter {
    display: inline-flex
}

.animated-counter-dynamic-width {
    width: 100vw;
    max-width: var(--width);
    transition: max-width var(--pm-transition)
}

.animated-counter-decimal {
    position: relative;
    flex-shrink: 0
}

.animated-counter-decimal-placeholder {
    color: transparent;
    flex-shrink: 0
}

.animated-counter-decimal-wrapper {
    position: absolute;
    inset: 0
}

.sparkles-container {
    pointer-events: none;
    font-size: .5rem
}

.sparkles-sparkle {
    position: absolute;
    animation: sparkle 5s infinite;
    width: 1em;
    height: 1em
}

@keyframes sparkle {
    0% {
        opacity: 0;
        transform: translate(0)
    }
    15% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate(var(--sparkle-tx), var(--sparkle-ty)) scale(var(--sparkle-scale))
    }
}

.stars-badge-base {
    position: absolute;
    height: 20px;
    border-radius: 10px;
    padding-left: 5px;
    padding-right: 6px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: linear-gradient(to right, #ffcd3a, #fa0);
    pointer-events: none
}

.stars-badge-base__icon {
    font-size: 14px
}

.btn-send-stars-badge {
    top: 0;
    left: 50%;
    --scale: 0;
    transform: translate(-50%, -11px) scale(var(--scale));
    transform-origin: center 50px;
    transition: transform .2s;
    z-index: 4
}

.btn-send-stars-badge--active {
    --scale: 1
}

.btn-send-stars-badge--active .stars-badge-base__icon {
    animation: btn-send-stars-badge-icon-rotate 1.25s ease forwards
}

@keyframes btn-send-stars-badge-icon-rotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.dialog-stars-badge {
    top: 2px;
    left: 58px;
    transform: translate(-100%)
}

.bubble-star-gift-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .5rem
}

.popup {
    --popup-min-width: auto;
    --popup-max-width: auto;
    --link-color: var(--primary-color);
    position: fixed !important;
    inset: 0;
    z-index: 4;
    background-color: #0000004d;
    margin: 0;
    padding: 1.875rem;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: var(--popup-transition-time), 0s;
    transition-delay: 0s, var(--popup-transition-time);
    transition-timing-function: var(--popup-transition-function);
    overflow: auto;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--primary-text-color);
    font-size: 1rem
}

.popup.no-overlay {
    padding: 0;
    background-color: transparent;
    overflow: visible
}

body.animation-level-0 .popup {
    transition: none
}

.popup.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s
}

.popup.active .popup-container, .popup.hiding .popup-container {
    transform: translate3d(var(--translateX), 0, 0)
}

.popup-title {
    flex: 1;
    padding-inline: 0 1rem;
    margin: 0;
    font-size: var(--font-size-20);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-container {
    --translateX: 0;
    position: relative;
    border-radius: 10px;
    background-color: var(--surface-color);
    padding: 1rem;
    transform: translate3d(var(--translateX), 3rem, 0);
    backface-visibility: hidden;
    transition: transform var(--popup-transition-time) var(--popup-transition-function);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    min-width: min(100%, var(--popup-min-width));
    max-width: min(100%, var(--popup-max-width))
}

body.animation-level-0 .popup-container {
    transition: none
}

.popup-description .peer-title {
    font-weight: var(--font-weight-bold)
}

.popup-description-framed {
    padding: .5rem 1rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
    display: block;
    border-radius: 12px;
    background-color: var(--light-secondary-text-color)
}

.popup-description-danger {
    color: var(--danger-color);
    background-color: rgba(var(--danger-color-rgb), .1)
}

.popup-centerer {
    margin: auto
}

.popup-close {
    z-index: 3;
    justify-self: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-end: 1.5rem
}

.popup-header {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    flex: 0 0 auto;
    position: relative
}

.popup-header.is-floating {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4
}

.popup-header.is-floating .popup-title, .popup-header.is-floating .popup-header-background {
    opacity: 0
}

body.animation-level-2 .popup-header.is-floating .popup-title, body.animation-level-2 .popup-header.is-floating .popup-header-background {
    transition: opacity var(--transition-standard-in)
}

.popup-header.is-floating:not(.scrolled-start) .popup-title, .popup-header.is-floating:not(.scrolled-start) .popup-header-background {
    opacity: 1
}

.popup-header-background {
    position: absolute;
    inset: 0;
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    z-index: -1
}

.popup-header .btn-icon {
    flex: 0 0 auto
}

.popup-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.popup-body .scrollable {
    position: relative
}

.popup-footer {
    flex: 0 0 auto;
    padding: .5rem;
    text-align: center
}

.popup-footer .btn-primary {
    display: block;
    text-transform: uppercase;
    padding: 0 1.0625rem;
    height: 44px;
    line-height: 44px
}

.popup-footer.abitlarger {
    padding: 1rem
}

.popup-footer.abitlarger .btn-primary {
    height: 48px;
    line-height: 48px
}

.popup-footer-caption {
    display: block;
    color: var(--secondary-text-color);
    font-size: var(--font-size-13);
    line-height: var(--line-height-14);
    margin-top: .625rem
}

.popup-button {
    font-weight: var(--font-weight-bold);
    padding: 0 1rem;
    text-transform: uppercase;
    border-radius: 10px;
    position: relative;
    max-width: 100%;
    height: 2.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-button + .popup-button {
    margin-inline-end: .625rem
}

.popup-button.with-icon {
    display: flex;
    align-items: center
}

.popup-button-icon.left {
    font-size: 1.25rem;
    margin-inline: -.1875rem .1875rem
}

.popup-button-icon.right {
    font-size: 1.5rem;
    margin-inline-start: .625rem
}

.popup-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    height: 3rem;
    padding: 0 .5rem
}

.popup-buttons.is-vertical-layout {
    flex-direction: column;
    height: auto;
    align-items: stretch
}

.popup-buttons.is-vertical-layout .popup-button {
    margin: 0 !important
}

.popup-avatar .popup-container {
    max-width: 600px;
    padding: 15px 16px 16px 24px
}

.popup-avatar .popup-close {
    font-size: 1.5rem;
    margin-top: 4px
}

.popup-avatar .popup-header {
    margin-bottom: 1px
}

.popup-avatar h6 {
    font-size: 1.25rem;
    text-align: start;
    margin: 0
}

.popup-avatar .crop {
    max-width: 100%;
    max-height: 100%;
    padding: 24px 54px 46px 46px;
    border-radius: 8px
}

.popup-avatar .crop > img {
    display: none
}

.popup-avatar .crop img {
    border-radius: 8px
}

.popup-avatar .btn-crop {
    position: absolute;
    bottom: 20px;
    right: 20px
}

.popup-new-media .popup-container {
    width: 420px;
    max-width: 420px;
    padding: 12px 20px 32.5px;
    max-height: 100%
}

.popup-new-media .popup-container img, .popup-new-media .popup-container video {
    border-radius: inherit
}

.popup-new-media .popup-header {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    padding: 12px 20px 15px;
    position: relative
}

.popup-new-media .popup-header .btn-primary {
    width: auto;
    height: 2.25rem;
    font-size: var(--font-size-14);
    padding: 0 1.375rem;
    border-radius: 10px;
    text-transform: uppercase;
    line-height: 2.25rem
}

.popup-new-media .popup-photo {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative
}

.popup-new-media .popup-confirm-btn-inner {
    display: flex;
    align-items: center;
    gap: .125rem
}

.popup-new-media .popup-confirm-btn-inner-star {
    font-size: 1.125rem
}

.popup-new-media .scrollable {
    position: relative
}

.popup-new-media .input-field {
    width: 100%;
    margin-top: 25px;
    flex: 0 0 auto
}

.popup-new-media .input-field-input {
    font-size: 1rem;
    border-radius: 10px
}

.popup-new-media .input-field label {
    font-size: inherit
}

.popup-new-media .btn-menu-overlay {
    z-index: 3
}

.popup-new-media .menu-send {
    z-index: 4;
    top: calc(100% + .25rem)
}

.popup-new-media.popup-send-photo .popup-container {
    width: 25rem;
    max-width: 25rem;
    padding: 0
}

.popup-new-media.popup-send-photo .popup-container.border-top-offset .popup-input-container {
    overflow: unset
}

.popup-new-media.popup-send-photo .popup-container.border-top-offset .popup-input-container:before {
    top: -8px
}

.popup-new-media.popup-send-photo .menu-send {
    top: unset;
    bottom: 3.5rem;
    right: .5rem
}

.popup-new-media.popup-send-photo .popup-header {
    padding: 0 1rem;
    height: 3.5rem;
    margin: 0
}

.popup-new-media.popup-send-photo .popup-body {
    position: relative
}

.popup-new-media.popup-send-photo .popup-body .scrollable {
    padding: 0 .5rem
}

.popup-new-media.popup-send-photo .input-message-container {
    min-height: inherit;
    max-height: inherit
}

.popup-new-media.popup-send-photo .input-message-input {
    max-height: inherit !important
}

.popup-new-media.popup-send-photo .btn-primary {
    flex: 0 0 auto;
    width: auto;
    padding: 0 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-transform: uppercase;
    margin-bottom: .5rem
}

.popup-new-media.popup-send-photo .popup-input-container {
    --height: 3.5rem;
    --max-height: 8.375rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 .5rem;
    min-height: var(--height);
    max-height: var(--max-height);
    position: relative;
    flex: 0 0 auto;
    overflow: hidden
}

.popup-new-media.popup-send-photo .popup-input-container:before {
    content: " ";
    position: absolute;
    height: 1px;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--border-color);
    opacity: 0
}

body.animation-level-2 .popup-new-media.popup-send-photo .popup-input-container:before {
    transition: opacity var(--transition-standard-in)
}

.popup-new-media.popup-send-photo .popup-input-container.has-border-top:before {
    opacity: 1
}

.popup-new-media.popup-send-photo .checkbox-field {
    margin-bottom: 0;
    margin-left: 0
}

.popup-new-media.popup-send-photo .popup-item-album {
    position: relative
}

.popup-new-media.popup-send-photo .popup-item-album .album-item {
    position: absolute
}

.popup-new-media.popup-send-photo .popup-item-album img, .popup-new-media.popup-send-photo .popup-item-album video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.popup-new-media.popup-send-photo .popup-photo > .popup-item-media {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto
}

.popup-new-media.popup-send-photo .popup-photo > .popup-item-media img {
    -o-object-fit: contain;
    object-fit: contain
}

.popup-new-media.popup-send-photo .popup-item-media-extend-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.popup-new-media.popup-send-photo .gif-label {
    --height: calc(var(--messages-time-text-size) + .375rem);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: var(--height);
    background-color: var(--message-time-background);
    padding: 0 6px;
    z-index: 2;
    font-size: var(--messages-time-text-size);
    color: #fff;
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: var(--height);
    line-height: 1
}

.popup-new-media.popup-send-photo .popup-photo > .popup-item {
    position: relative;
    border-radius: inherit;
    overflow: hidden
}

.popup-new-media.popup-send-photo .popup-photo > .popup-item + .popup-item {
    margin-top: .5rem
}

.popup-new-media.popup-send-photo .drop {
    border-radius: 0
}

.popup-new-media.popup-send-photo .document, .popup-new-media.popup-send-photo .audio {
    --icon-margin: .5rem;
    --icon-size: 3rem;
    --padding: .25rem;
    margin: 0 .25rem;
    border-radius: 10px;
    cursor: default;
    height: 3.5rem
}

html.no-touch .popup-new-media.popup-send-photo .document:hover, html.no-touch .popup-new-media.popup-send-photo .document:active, html.no-touch .popup-new-media.popup-send-photo .audio:hover, html.no-touch .popup-new-media.popup-send-photo .audio:active {
    background-color: var(--light-secondary-text-color);
    --message-background-color: var(--light-filled-secondary-text-color)
}

.popup-new-media.popup-send-photo .document {
    max-width: 100%;
    overflow: hidden
}

.popup-new-media.popup-send-photo .document.document-with-thumb {
    --icon-size: 4.5rem;
    height: 5rem
}

.popup-new-media.popup-send-photo .document-name {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    margin-bottom: .125rem
}

.popup-new-media.popup-send-photo .document-ico {
    font-size: 16px;
    font-weight: 400;
    line-height: 11px;
    letter-spacing: 0;
    border-radius: 5px
}

.popup-new-media.popup-send-photo .btn-menu-reactions-container {
    --bubble-side-offset: 0
}

.popup-new-media.popup-send-photo .btn-menu-reactions-bubble {
    display: none
}

.popup-new-media.popup-send-photo .btn-primary {
    overflow: unset
}

.popup-new-media.popup-send-photo .btn-send-effect-container {
    bottom: -.25rem;
    inset-inline-end: -.25rem;
    box-shadow: var(--menu-box-shadow)
}

.popup-create-contact .popup-container {
    padding: 0 1rem 1rem !important
}

.popup-create-contact .popup-header {
    padding: 0 !important
}

.popup-create-contact .btn-primary {
    margin-bottom: 0 !important
}

.popup-create-contact .input-field-name {
    margin-top: 0
}

.popup-create-contact .name-fields {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 116px;
    margin-top: 1rem
}

.popup-create-contact .avatar-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.popup-create-poll .popup-close {
    margin-top: -1px;
    margin-inline-start: -4px
}

.popup-item-media-action-menu {
    position: fixed;
    --size: 20px;
    --move: 0px;
    transform: translate(-50%, calc(-100% - 6px));
    display: flex;
    padding: 2px 6px;
    gap: 8px;
    border-radius: 999px;
    background-color: #0006;
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    color: #ffffffb3;
    font-size: var(--size);
    transition: opacity .2s;
    opacity: 0;
    z-index: 5
}

@supports (-moz-animation: animation 1s) {
    .popup-item-media-action-menu {
        background-color: #000c;
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }
}

.popup-item-media-action {
    position: relative;
    cursor: pointer;
    pointer-events: initial !important;
    --padding: 4px;
    padding: var(--padding);
    line-height: 1;
    border-radius: 50%;
    height: calc(var(--size) + var(--padding) * 2);
    width: calc(var(--size) + var(--padding) * 2);
    transition: .2s
}

.popup-item-media-action:hover {
    color: #fff
}

.popup-item-media-action > span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .2s
}

.popup-item-media-action > span:nth-child(2) {
    opacity: 0
}

.popup-item-media-action[data-toggled=true] > span:nth-child(1) {
    opacity: 0
}

.popup-item-media-action[data-toggled=true] > span:nth-child(2) {
    opacity: 1
}

.popup-peer {
    --popup-min-width: 19.5rem;
    --popup-max-width: 25rem
}

.popup-peer .popup-header {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 2.5rem;
    margin: 0;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%
}

.popup-peer .popup-container {
    padding: .75rem .5rem;
    width: -moz-min-content;
    width: min-content
}

.popup-peer .popup-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold)
}

.popup-peer .popup-title:not(:first-child) {
    padding-left: 1rem
}

.popup-peer .popup-description {
    margin-top: 0;
    margin-bottom: 0;
    min-width: min(100%, 15rem);
    max-width: -moz-fit-content;
    max-width: fit-content;
    line-height: var(--line-height);
    padding: .625rem 1rem .5rem;
    white-space: pre-wrap;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-peer .checkbox-field {
    display: flex;
    align-items: center;
    min-height: 3rem;
    height: auto;
    margin: 0;
    padding: .25rem 1.125rem
}

.popup-peer .checkbox-field .checkbox-box {
    left: auto
}

.popup-stickers {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.popup-stickers .scrollable.is-loading {
    min-height: 9rem;
    position: relative
}

.popup-stickers .super-emojis {
    padding: 0 .5rem
}

.popup-stickers .popup-container {
    max-width: 420px;
    max-height: 420px;
    width: 420px;
    padding: 0
}

.popup-stickers .popup-close {
    font-size: 1.5rem
}

.popup-stickers .popup-header {
    margin: .625rem 1rem;
    flex: 0 0 auto
}

.popup-stickers .popup-footer {
    color: var(--primary-color)
}

.popup-stickers .popup-footer .btn-primary {
    width: auto;
    margin: 0 auto
}

.popup-stickers .sticker-set {
    margin: .0625rem 0
}

.popup-stickers .sticker-set .row-title {
    font-weight: var(--font-weight-bold)
}

.popup-stickers .sticker-set-stickers {
    --per-row: 5;
    --item-size: var(--popup-sticker-size);
    padding: 0 5px;
    display: grid;
    grid-template-columns:repeat(var(--per-row), 1fr);
    position: relative
}

@media only screen and (max-width: 600px) {
    .popup-stickers .sticker-set-stickers {
        --per-row: 4
    }
}

.popup-stickers .sticker-set-stickers .media-sticker-wrapper {
    width: var(--item-size);
    height: var(--item-size);
    margin-bottom: 2px;
    justify-self: center;
    cursor: pointer;
    position: relative
}

@media only screen and (max-width: 600px) {
    .popup-stickers .sticker-set-stickers .media-sticker-wrapper {
        margin-bottom: 8px
    }
}

.popup-stickers .sticker-set-stickers .media-sticker-wrapper:hover {
    border-radius: 12px;
    background-color: var(--light-secondary-text-color)
}

.popup-date-picker {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.popup-date-picker .popup-container {
    padding: 12px 14px
}

@media (min-height: 470px) {
    .popup-date-picker .popup-container[data-lines="7"] {
        top: 19px
    }

    .popup-date-picker .popup-container[data-lines="5"] {
        top: -19px
    }
}

.popup-date-picker .popup-header {
    margin-left: 6px;
    margin-top: 4px;
    margin-bottom: 1.375rem
}

.popup-date-picker .popup-title {
    font-weight: var(--font-weight-bold);
    font-size: 20px
}

.popup-date-picker .popup-buttons {
    order: 2;
    margin-right: -2px
}

.popup-date-picker .popup-buttons button + button {
    margin-left: 9px;
    margin-top: 0
}

.popup-date-picker .date-picker-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto
}

.popup-date-picker .date-picker-controls .date-picker-month-title {
    font-size: 14px;
    font-weight: var(--font-weight-bold)
}

.popup-date-picker .date-picker-prev {
    transform: rotate(90deg)
}

.popup-date-picker .date-picker-next {
    transform: rotate(-90deg)
}

.popup-date-picker .date-picker-prev:disabled, .popup-date-picker .date-picker-next:disabled {
    visibility: hidden
}

.popup-date-picker .date-picker-months {
    margin-top: 7px;
    margin-bottom: 1.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.popup-date-picker .date-picker-month {
    display: grid;
    grid-template-columns:repeat(7, 1fr);
    width: 100%;
    justify-content: center
}

.popup-date-picker .date-picker-month .btn-icon {
    justify-self: center;
    width: 38px;
    height: 38px;
    font-size: 12px;
    color: var(--secondary-text-color);
    display: flex;
    justify-content: center;
    align-items: center
}

.popup-date-picker .date-picker-month .btn-icon:disabled {
    opacity: 1
}

.popup-date-picker .date-picker-month-date:disabled {
    opacity: .7 !important
}

.popup-date-picker .date-picker-month .btn-icon:not(:disabled) {
    color: var(--primary-text-color)
}

.popup-date-picker .date-picker-month .btn-icon.active {
    color: var(--badge-text-color);
    border-radius: 50%;
    background-color: var(--primary-color) !important
}

.popup-schedule .popup-header {
    margin-top: 5px;
    margin-bottom: 17px;
    margin-left: 0
}

@media only screen and (max-width: 600px) {
    .popup-schedule .popup-header {
        margin-left: 3px
    }
}

.popup-schedule .popup-container {
    min-width: 420px;
    width: 420px;
    padding: 4px 16px 16px
}

@media only screen and (max-width: 600px) {
    .popup-schedule .popup-container {
        min-width: 312px;
        width: 312px;
        padding: 4px 14px 14px
    }
}

.popup-schedule .popup-container[data-lines="5"] {
    top: -16px
}

.popup-schedule .popup-container[data-lines="7"] {
    top: 16px
}

.popup-schedule .date-picker-month {
    margin-right: -20px;
    margin-left: 2px;
    width: unset
}

@media only screen and (max-width: 600px) {
    .popup-schedule .date-picker-month {
        margin-left: 0;
        margin-right: -6px
    }
}

.popup-schedule .date-picker-month-title {
    font-weight: var(--font-weight-bold);
    font-size: 20px;
    flex: 1 1 auto
}

.popup-schedule .date-picker-month .btn-icon {
    justify-self: auto;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    width: 36px;
    height: 36px;
    margin-top: -4px
}

.popup-schedule .date-picker-month-date:disabled {
    color: #9ba3a8 !important
}

.popup-schedule .date-picker-month-day {
    font-weight: var(--font-weight-bold);
    color: var(--primary-text-color) !important;
    font-size: 14px !important
}

.popup-schedule .date-picker-months {
    margin-bottom: 14px
}

@media only screen and (max-width: 600px) {
    .popup-schedule .date-picker-months {
        margin-bottom: 13px
    }
}

.popup-schedule .date-picker-time {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem
}

@media only screen and (max-width: 600px) {
    .popup-schedule .date-picker-time {
        margin-bottom: 22px
    }
}

.popup-schedule .date-picker-time .input-field {
    width: 80px
}

.popup-schedule .date-picker-time .input-field-input {
    text-align: center
}

.popup-schedule .date-picker-time-delimiter {
    padding: 14px 20px;
    font-weight: var(--font-weight-bold)
}

.popup-schedule .date-picker-controls .btn-icon:disabled {
    visibility: visible
}

@media only screen and (max-width: 600px) {
    .popup-schedule .btn-primary {
        height: 50px;
        width: 280px;
        margin-left: 2px
    }
}

.popup-schedule-secondary {
    margin-top: .5rem !important
}

.popup-create-poll .popup-container {
    max-height: min(640px, 100%);
    padding: 0
}

.popup-create-poll .radio-field {
    margin: 0
}

.popup-create-poll .radio-field .radio-field-main:before {
    left: .25rem
}

.popup-create-poll .radio-field .radio-field-main:after {
    left: .5625rem
}

.popup-create-poll .hidden-widget .btn-icon, .popup-create-poll .radio-field:first-child:last-child .btn-icon {
    pointer-events: none;
    opacity: 0 !important
}

.popup-create-poll .input-field .btn-icon {
    position: absolute;
    right: .4375rem;
    top: .4375rem;
    z-index: 1;
    opacity: 1;
    transition: opacity .2s ease
}

@media only screen and (max-width: 600px) {
    .popup-create-poll .input-field .btn-icon {
        right: .3125rem;
        top: .3125rem
    }
}

.popup-create-poll .caption {
    color: var(--secondary-text-color);
    font-weight: var(--font-weight-bold);
    padding: 1rem 1.5rem 0
}

.popup-create-poll .poll-create-questions {
    padding: 0 1.25rem 1.5rem
}

.popup-create-poll .poll-create-questions:not(:last-child) .input-field-input {
    padding-right: 3.25rem
}

.popup-create-poll .poll-create-settings {
    padding: 0 .5rem .5rem
}

.popup-create-poll .subtitle {
    margin-top: .875rem;
    font-size: .875rem;
    line-height: 1.2
}

.popup-create-poll .btn-primary {
    width: 94px
}

.popup-create-poll .menu-send {
    top: 54px;
    right: 20px
}

.popup-create-poll hr:not(.hide) {
    display: block !important
}

.popup-forward .popup-container {
    width: 420px;
    max-width: 420px;
    padding: 7px 0 0;
    max-height: min(40.625rem, 100%);
    height: 40.625rem
}

.popup-forward .popup-header {
    flex: 0 0 auto;
    margin-bottom: 7px;
    padding: 0 1rem
}

@media only screen and (max-width: 600px) {
    .popup-forward .popup-header {
        padding-inline-start: .8125rem
    }
}

.popup-forward .popup-title {
    flex-grow: 1;
    padding: 0;
    min-height: 40px !important;
    display: flex;
    align-items: center
}

.popup-forward .popup-title .selector-search-input {
    font-size: var(--font-size-20)
}

@media only screen and (max-width: 600px) {
    .popup-forward .popup-close {
        margin-inline-end: 1.1875rem
    }
}

.popup-forward .selector.active, .popup-forward .chatlist-container {
    height: auto;
    overflow: hidden;
    display: flex;
    width: 100%;
    flex-direction: row;
    flex: 1 1 auto
}

.popup-forward .selector-search {
    gap: .5rem
}

.popup-forward .selector-search-section {
    padding: 0 !important
}

.popup-forward .selector-search-section-container {
    width: 100%;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-color)
}

.popup-forward .selector-search-section-container + .popup-body .scrollable {
    padding-top: .5rem !important
}

.popup-forward .selector-search-section-container + .popup-body .chatlist {
    margin-top: .5rem !important
}

.popup-forward .selector-search-input {
    line-height: 1;
    padding: 0 !important;
    min-height: 2rem
}

.popup-forward .selector-user {
    margin: 0 !important
}

.popup-forward .selector .chatlist {
    margin-top: 0 !important
}

.popup-forward .gradient-delimiter {
    display: none
}

.popup-forward .sidebar-left-section {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important
}

.popup-forward .chatlist-container .scrollable {
    border-bottom: none;
    border-top-color: var(--surface-color)
}

.popup-forward .tabs-container {
    height: 100%
}

.popup-forward .tabs-container .selector:not(.active) {
    display: none
}

.popup-instance-deactivated {
    background-color: #0009
}

.popup-instance-deactivated .instance-deactivated-container {
    margin: auto;
    text-align: center;
    pointer-events: none
}

.popup-instance-deactivated .header {
    font-size: 2rem;
    color: #fff
}

.popup-instance-deactivated .subtitle {
    color: #fff;
    opacity: .6;
    font-size: 1.5rem;
    line-height: var(--line-height)
}

.popup-join-chat-invite {
    --popup-min-width: 22.5rem;
    --popup-max-width: 420px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.popup-join-chat-invite .popup-body {
    align-items: center;
    padding: .5rem 0 1.25rem
}

.popup-join-chat-invite .popup-description {
    margin: .5rem 0 -.5rem;
    text-align: center
}

.popup-join-chat-invite .chat-title {
    font-weight: var(--font-weight-bold);
    margin: .75rem 0 .25rem;
    line-height: var(--line-height);
    text-align: center;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-join-chat-invite .chat-participants-count {
    color: var(--secondary-text-color);
    font-size: .875rem;
    line-height: var(--line-height)
}

.popup-join-chat-invite .request-caption {
    margin-top: 1rem;
    text-align: center
}

.popup-call .popup-header {
    width: 100%;
    justify-content: space-between
}

.popup-call .popup-title {
    flex: 1 1 auto
}

.call {
    width: 100%;
    height: 100%;
    color: #fff;
    align-items: center
}

.call.is-full-screen, html.is-mobile .call {
    border-radius: 0
}

.call.is-full-screen:not(.show-controls) {
    cursor: none
}

.call.show-controls .call-title, .call.show-controls .call-subtitle, .call.show-controls .popup-header, .call.show-controls .call-button, .call.show-controls .call-button-text, .call.show-controls .call-emojis, .call.show-controls .call-party-state, .call.no-video .call-title, .call.no-video .call-subtitle, .call.no-video .popup-header, .call.no-video .call-button, .call.no-video .call-button-text, .call.no-video .call-emojis, .call.no-video .call-party-state {
    opacity: 1
}

.call.show-controls .call-video {
    opacity: .8
}

.call.show-controls .call-video-blur {
    opacity: .56
}

.call .popup-header .btn-icon {
    color: #fff
}

.call .popup-header .call-emojis {
    transform: scale(1.3125);
    margin-right: 1rem
}

.call-avatar {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .7;
    border-radius: inherit
}

.call-avatar .avatar-full {
    font-size: 6rem
}

.call-title {
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem
}

.call-subtitle {
    font-size: 1rem
}

.call-title, .call-subtitle, .call-emojis, .call .popup-header {
    opacity: 0
}

body.animation-level-2 .call-title, body.animation-level-2 .call-subtitle, body.animation-level-2 .call-emojis, body.animation-level-2 .call .popup-header {
    transition: opacity var(--transition-standard-in)
}

.call-buttons {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 1.75rem;
    align-self: center;
    z-index: 1;
    pointer-events: none
}

.call-buttons .call-button {
    pointer-events: all
}

.call-buttons .call-button-container {
    --scale: 1
}

.call-buttons .call-button-container.hide-me {
    --scale: 0 !important;
    transform: scale(var(--scale))
}

body.animation-level-2 .call-buttons .call-button-container.hide-me {
    transition: transform var(--transition-standard-in)
}

.call-buttons .call-button-container.hide-me .call-button, .call-buttons .call-button-container.hide-me .call-button-text {
    opacity: 0
}

body.animation-level-2 .call-buttons .call-button, body.animation-level-2 .call-buttons .call-button-text {
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in)
}

.call-buttons.is-first .call-button, .call-buttons.is-first .call-button-text {
    transform: translate(calc(var(--call-button-size) * -.5 + var(--call-button-margin) * -.5))
}

.call-buttons.is-second {
    --margin-length: 2
}

.call-buttons.is-second .call-button, .call-buttons.is-second .call-button-text {
    transform: translate(calc(var(--call-button-size) * 2 + var(--call-button-margin) * var(--margin-length)))
}

.call.no-screen .call-buttons.is-second {
    --margin-length: .656875
}

.call-button {
    background-color: #ffffff1a
}

.call-button-red {
    background-color: var(--danger-color) !important
}

.call-button-green {
    background-color: var(--gc-green-text-color) !important
}

.call-button.active {
    background-color: #fff !important
}

.call-button.active:before {
    color: #9e9e9e
}

.call-button, .call-button-text {
    opacity: 0
}

.call-video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    border-radius: inherit;
    opacity: 1
}

.call-video-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background-color: #000;
    z-index: -1
}

.call-video-container.small {
    bottom: 8rem;
    right: 1rem;
    left: auto;
    top: auto;
    z-index: 1;
    border-radius: 10px;
    cursor: pointer
}

.call-video-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .7;
    border-radius: inherit
}

body.animation-level-2 .call-video, body.animation-level-2 .call-video-blur {
    transition: opacity var(--transition-standard-in)
}

.call .call-emojis {
    transform: scale(1.125)
}

.call .call-emojis .emoji {
    margin: 0 .125rem
}

.call-party-states {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: calc(1.75rem + var(--call-button-size) + 1.5rem + 1rem);
    z-index: 2;
    width: 100%;
    align-items: center;
    padding: 0 1rem;
    pointer-events: none
}

.call-party-state {
    height: 1.625rem;
    border-radius: 1.625rem;
    line-height: 1.625rem;
    background-color: #fff3;
    color: #fff;
    padding: 0 .625rem;
    font-size: .875rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    font-weight: var(--font-weight-bold);
    opacity: 0;
    transform: scale(0) translateY(0);
    max-width: 100%
}

body.animation-level-2 .call-party-state {
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in)
}

.call-party-state .rlottie-icon {
    width: 1.875rem !important;
    height: 1.875rem !important;
    margin-right: .25rem;
    margin-left: -.25rem;
    flex: 0 0 auto
}

.call-party-state.is-visible:not(.backwards) {
    transform: scale(1) translateY(0)
}

.call-party-state-text, .call-title {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.call.two-button-rows .call-buttons.is-first .call-button, .call.two-button-rows .call-buttons.is-first .call-button-text {
    transform: translateY(calc((var(--call-button-size) + var(--call-button-margin) + 1.125rem) * -1))
}

.call.two-button-rows .call-buttons.is-second .call-button, .call.two-button-rows .call-buttons.is-second .call-button-text {
    transform: translate(0)
}

.popup-group-call:not(.movable-element) {
    top: 7rem
}

.popup-group-call:not(.movable-element) .group-call {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.popup-group-call .popup-body {
    justify-content: space-between
}

.popup-group-call .popup-container {
    background-color: var(--gc-background-color);
    color: var(--gc-primary-text-color)
}

.popup-group-call .popup-close {
    margin: 0
}

.popup-group-call .popup {
    z-index: 6
}

.group-call {
    --call-button-margin: 1.25rem;
    width: 100%;
    height: 100%;
    padding: 0 .5rem
}

.group-call:after {
    content: " ";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7.5rem;
    background: linear-gradient(180deg, rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, .65) 48.54%, var(--gc-background-color) 100%)
}

.group-call-header {
    height: 3.5rem;
    margin-bottom: .125rem;
    padding: 0 .5rem
}

.group-call-header .btn-icon {
    flex: 0 0 auto;
    color: inherit
}

.group-call-header-info {
    flex: 1 1 auto;
    margin-left: 1.5rem;
    overflow: hidden
}

.group-call-header-title {
    font-weight: var(--font-weight-bold)
}

.group-call-header-title, .group-call-header-subtitle {
    font-size: var(--font-size-16);
    line-height: var(--line-height);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.group-call-header-subtitle {
    font-size: .875rem;
    color: var(--gc-secondary-text-color)
}

.group-call-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 1.75rem;
    align-self: center;
    z-index: 1
}

.group-call-button {
    opacity: 1;
    color: var(--gc-primary-text-color);
    background-color: var(--gc-button-unmuted-color)
}

.group-call[data-mic-state=muted] .group-call-button {
    background-color: var(--gc-button-muted-color)
}

.group-call[data-mic-state=hand] .group-call-button {
    background-color: var(--gc-button-hand-color)
}

.group-call:not(.is-big-layout)[data-mic-state=unmuted] .group-call-button {
    background-color: var(--gc-button-unmuted-fill-color)
}

.group-call-button-red {
    background-color: var(--gc-button-leave-color) !important
}

.group-call[data-mic-state=unmuted] .group-call-microphone-button {
    background: linear-gradient(230.46deg, #00a3b4 12.94%, #00cb47 86.29%)
}

.group-call[data-mic-state=muted] .group-call-microphone-button {
    background: linear-gradient(225deg, #4eabf8 14.73%, #3478f6 85.27%)
}

.group-call[data-mic-state=hand] .group-call-microphone-button {
    background: linear-gradient(225deg, #df44b8 14.73%, #3851eb 85.27%)
}

.group-call-participant-menu {
    z-index: 5
}

.group-call-participant {
    padding-right: .5rem
}

.group-call-participant-status-icon {
    vertical-align: middle;
    margin-right: 6px;
    line-height: 1;
    display: inline-block;
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem
}

.group-call-participant-status-container {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.group-call-participant .dialog-title, .group-call-participant .dialog-subtitle {
    padding-right: 2.5rem
}

.group-call-participant-muted-icon-container {
    position: absolute !important;
    right: .5rem
}

.group-call-participant-video-container {
    position: relative;
    height: 15rem;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background-color: #000;
    overflow: hidden;
    margin: .25rem;
    width: 33%;
    flex: 1 1 auto;
    cursor: pointer
}

.group-call-participant-video-container:after {
    content: " ";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0000 55.62%, #00000080 86.46%)
}

.group-call-participant-video-container .group-call-participant-status-icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem
}

.group-call-participant-video-container:after, .group-call-participant-video-info, .group-call-participant-video-header {
    opacity: 0
}

body.animation-level-2 .group-call-participant-video-container:after, body.animation-level-2 .group-call-participant-video-info, body.animation-level-2 .group-call-participant-video-header {
    transition: opacity var(--transition-standard-in)
}

.group-call-participant-video-info, .group-call-participant-video-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .5rem 0 .75rem;
    position: absolute;
    right: 0;
    bottom: .25rem;
    left: 0;
    z-index: 1
}

.group-call-participant-video-header {
    top: 0;
    bottom: auto;
    justify-content: flex-end;
    padding-right: .75rem;
    padding-top: .875rem
}

.group-call-participant-video-header .group-call-pin-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem
}

.group-call-participant-video-info .peer-title {
    font-weight: var(--font-weight-bold)
}

.group-call-participant-video-info .peer-title, .group-call-participant-video-info-left {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.group-call-participant-video-info .group-call-participant-status-container {
    opacity: .6;
    margin-top: -1px
}

.group-call-participant-video-info-left {
    flex: 1 1 auto
}

.group-call-participant-video-info-right {
    flex: 0 0 auto;
    margin-left: .75rem;
    width: 2rem;
    height: 2rem
}

.group-call-participant .is-speaking {
    color: var(--gc-green-text-color)
}

.group-call-participant .is-waiting {
    color: var(--gc-blue-text-color)
}

.group-call-participants {
    border-radius: 10px;
    overflow: hidden;
    flex: 1 1 auto
}

.group-call-participants-scrollable {
    position: relative;
    border-radius: inherit;
    height: auto;
    padding-bottom: 6rem
}

.group-call-participants-video-container {
    display: flex;
    flex-wrap: wrap;
    margin: -.25rem -.25rem 0
}

.group-call-participants-video-container:not(.show-controls), .group-call-participants-video-container:not(.show-controls) .group-call-participant-video-container {
    cursor: none
}

.group-call-participants-video-container[data-layout="3"] .group-call-participant-video-container:first-child {
    width: 100%
}

.group-call-participants-video-container[data-layout="4"] .group-call-participant-video-container, .group-call-participants-video-container[data-layout="3"] .group-call-participant-video-container:nth-child(n+2) {
    height: auto;
    flex: 1 0 auto
}

.group-call-participants-video-container[data-layout="4"] .group-call-participant-video-container:before, .group-call-participants-video-container[data-layout="3"] .group-call-participant-video-container:nth-child(n+2):before {
    content: " ";
    display: block;
    padding-top: 100%
}

.group-call-participants-video-container.show-controls .group-call-participant-video-container:after, .group-call-participants-video-container.show-controls .group-call-participant-video-info, .group-call-participants-video-container.show-controls .group-call-participant-video-header {
    opacity: 1
}

.group-call-participants .chatlist {
    background: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto
}

.group-call-participants .user-title {
    color: var(--gc-primary-text-color)
}

.group-call-participants .user-last-message {
    color: var(--gc-secondary-text-color)
}

.group-call-big-video-container {
    position: relative
}

.group-call-big-video-container .group-call-participants-video-container {
    min-height: 100%;
    margin-bottom: .25rem
}

.group-call-big-video-container .group-call-participant-video-container {
    height: auto
}

.group-call-big-video-container .group-call-participant-video-container:before {
    padding-top: 56.25% !important
}

.group-call-cfs {
    display: none
}

.group-call:not(.is-big-layout) .popup-body .group-call-header {
    display: none
}

.group-call:not(.is-big-layout) .group-call-big-video-container {
    display: none
}

.group-call:not(.is-big-layout).has-pinned .group-call-participant-video-container:not(.video-hidden) {
    display: none
}

.group-call.is-full-screen {
    border-radius: 0
}

.group-call.is-big-layout > .group-call-header, .group-call.is-full-screen > .group-call-header {
    padding: 0 1rem
}

.group-call.is-big-layout:not(.is-full-screen) {
    --gc-right-column-width: 17.5rem
}

.group-call.is-big-layout:not(.is-full-screen) .group-call-cfs {
    display: flex
}

.group-call.is-big-layout {
    background-color: #000
}

.group-call.is-big-layout:after {
    content: none
}

html.no-touch .group-call.is-big-layout > .group-call-header .btn-icon:hover, html.no-touch .group-call.is-big-layout > .group-call-header .btn-icon:active {
    background-color: #7075794d
}

.group-call.is-big-layout .video-hidden {
    display: none
}

.group-call.is-big-layout.is-right-column-shown .popup-body {
    right: 0
}

.group-call.is-big-layout.is-right-column-shown .group-call-big-video-container {
    width: calc(100% - var(--gc-right-column-width))
}

.group-call.is-big-layout.is-right-column-shown .group-call-buttons {
    transform: translate(calc(var(--gc-right-column-width) / -2))
}

.group-call.is-big-layout.is-right-column-shown .popup-container {
    --translateX: calc(var(--gc-right-column-width) / -2)
}

.group-call.is-big-layout .group-call-header-title {
    font-size: 1.25rem
}

.group-call.is-big-layout .popup-body {
    position: absolute;
    top: 0;
    right: calc(var(--gc-right-column-width) * -1);
    bottom: 0;
    width: var(--gc-right-column-width);
    background-color: var(--gc-background-color);
    padding: inherit
}

.group-call.is-big-layout .group-call-buttons {
    padding: .75rem;
    bottom: 2.5rem
}

body.animation-level-2 .group-call.is-big-layout .group-call-buttons {
    transition: opacity var(--transition-standard-in)
}

.group-call.is-big-layout .group-call-buttons:before {
    position: absolute;
    content: " ";
    inset: 0;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    background: #00000080;
    border-radius: 1.25rem
}

.group-call.is-big-layout .group-call-buttons .group-call-button, .group-call.is-big-layout .group-call-buttons:before {
    opacity: 0
}

.group-call.is-big-layout .group-call-buttons.show-controls .group-call-button, .group-call.is-big-layout .group-call-buttons.show-controls:before {
    opacity: 1
}

body.animation-level-2 .group-call.is-big-layout .group-call-buttons:before {
    transition: opacity var(--transition-standard-in)
}

body.animation-level-2 .group-call.is-big-layout .group-call-buttons .group-call-button {
    transition: opacity var(--transition-standard-in), background-color var(--transition-standard-in)
}

.group-call.is-big-layout .group-call-participants-scrollable {
    padding-bottom: .5rem
}

.group-call.is-big-layout .group-call-header-subtitle {
    display: none
}

.popup-sponsored .popup-header {
    height: auto;
    min-height: 2.5rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-top: -.375rem
}

.popup-sponsored .popup-title {
    word-break: break-word;
    white-space: pre-wrap
}

.popup-sponsored .popup-buttons {
    margin-bottom: -.5rem;
    margin-top: .25rem
}

.popup-sponsored .scrollable-y {
    position: relative;
    max-height: 25rem;
    margin: 0 -1.5rem;
    width: calc(100% + 3rem);
    padding: 0 1.5rem;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.popup-mute .popup-container {
    min-width: 16rem
}

.popup-reacted-list {
    --size: 1.5rem;
    --custom-emoji-size: var(--size);
    --message-primary-color: var(--primary-color)
}

.popup-reacted-list .popup-container {
    width: 25rem;
    height: 600px;
    max-height: 600px;
    padding: 0
}

.popup-reacted-list .popup-header {
    min-height: 3.5625rem;
    margin: 0;
    padding: .25rem .75rem .5rem;
    border-bottom: 1px solid var(--border-color)
}

.popup-reacted-list .popup-close {
    margin-top: .375rem;
    margin-inline-end: .5rem;
    height: 40px;
    order: -1
}

.popup-reacted-list .reaction {
    --reaction-size: var(--size);
    --additional-height: .75rem;
    --margin: .5rem;
    --background-color: var(--light-filled-primary-color);
    --counter-color: var(--primary-color);
    flex: 1 0 auto;
    justify-content: space-evenly;
    --margin-vertical: .5rem
}

.popup-reacted-list .reaction.is-chosen:not(.backwards) {
    --counter-color: #fff
}

.popup-reacted-list .reaction-sticker-icon {
    font-size: 1.25rem !important;
    margin: 0;
    display: flex;
    align-items: center
}

.popup-reacted-list .sidebar-left-section {
    margin-bottom: 0 !important
}

.popup-reacted-list .tabs-container {
    flex: 1 1 auto;
    overflow: hidden
}

.popup-reacted-list .tabs-tab {
    background-color: var(--surface-color)
}

.popup-reacted-list .chatlist-chat {
    padding-inline-end: 3.25rem !important
}

.popup-payment .popup-container {
    padding: 0;
    width: 26.25rem;
    max-width: 26.25rem;
    max-height: min(100%, 43.5rem);
    border-radius: 16px
}

.popup-payment .popup-header {
    height: 3.5rem;
    margin: 0;
    padding: 0 1rem
}

.popup-payment.is-loading .popup-container {
    min-height: 26.25rem
}

.popup-payment .scrollable {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.popup-payment .popup-body hr {
    display: block !important;
    margin: .5rem 0 !important;
    padding: 0 !important
}

.popup-payment .input-field {
    --height: 3rem;
    margin: .75rem .5rem 0
}

.popup-payment .input-field-input {
    --padding: .75rem
}

.popup-payment .input-fields-row .input-field {
    margin-top: 1.25rem
}

.popup-payment .sidebar-left-section {
    padding: 0 !important
}

.popup-payment .sidebar-left-section-name + .input-field, .popup-payment .sidebar-left-section-name + .input-fields-row .input-field {
    margin-top: .75rem
}

.popup-payment .sidebar-left-section .row {
    margin-top: .5rem
}

.popup-payment .sidebar-left-section-content {
    margin: 0 .5rem !important
}

.popup-payment .select-wrapper {
    max-height: 10rem;
    box-shadow: var(--menu-box-shadow)
}

.popup-payment .select-wrapper li {
    grid-template-columns:calc(26px + 2rem) 1fr;
    height: 3rem
}

.popup-payment .row {
    border-radius: 10px
}

.payment-verification {
    width: 100%;
    height: 40rem;
    max-height: 100%;
    border: none;
    flex: 1 1 auto
}

body.animation-level-2 .payment-verification {
    transition: opacity var(--transition-standard-in)
}

.payment-item {
    width: 100%;
    padding: 0 1.25rem
}

.payment-item-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    flex: 0 0 auto
}

.payment-item-details:last-child {
    margin-bottom: 0
}

.payment-item-details-photo {
    width: 6.25rem;
    height: 6.25rem;
    flex: 0 0 auto;
    border-radius: 10px;
    margin-right: 1rem
}

.payment-item-details-photo .media-photo {
    border-radius: inherit
}

.payment-item-details-lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column
}

.payment-item-details-lines-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-16);
    line-height: var(--line-height-16)
}

.payment-item-details-lines-description, .payment-item-details-lines-bot-name {
    font-size: var(--font-size-14);
    line-height: 1.25rem
}

.payment-item-details-lines-bot-name {
    color: var(--secondary-text-color)
}

.payment-item-prices {
    display: flex;
    flex-direction: column;
    margin: 1rem .25rem .5rem
}

.payment-item-prices-price {
    color: var(--secondary-text-color);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    line-height: 1.1875rem
}

.payment-item-prices-price + .payment-item-prices-price {
    margin-top: 1.5rem
}

.payment-item-prices-price.is-total {
    color: var(--primary-text-color)
}

.payment-item-tips {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: .25rem -.5rem 1.5rem
}

.payment-item-tips-tip {
    --background-intensity: .1;
    flex: 1 1 auto;
    text-align: center;
    height: 2.5rem;
    border-radius: 1.25rem;
    background-color: rgba(84, 190, 97, var(--background-intensity));
    color: #3ba748;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-16);
    line-height: 2.5rem;
    margin-top: .5rem
}

body.animation-level-2 .payment-item-tips-tip {
    transition: color .1s ease-in-out, background-color .1s ease-in-out
}

.payment-item-tips-tip:not(:last-child) {
    margin-right: .5rem
}

html.no-touch .payment-item-tips-tip:not(.active):hover, html.no-touch .payment-item-tips-tip:not(.active):active {
    --background-intensity: .3
}

.payment-item-tips-tip.active {
    --background-intensity: 1;
    color: #fff
}

.payment-item-tips-input {
    color: inherit !important;
    font-weight: inherit !important;
    display: inline
}

.payment-item-row {
    margin: 0 .5rem;
    padding-top: 0;
    padding-bottom: 0
}

.payment-item-method-row .media-photo {
    border-radius: 10px
}

.payment-item-pay {
    flex: 0 0 auto;
    width: auto;
    height: 3rem;
    margin: 1rem;
    text-transform: uppercase
}

.payment-item-preloader-container {
    position: relative;
    flex: 1 1 auto
}

.popup-payment-shipping-methods .popup-container {
    min-height: auto
}

.popup-payment-shipping-methods .row {
    margin-top: 0 !important
}

.popup-payment-verification .popup-header:after {
    position: absolute;
    content: " ";
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background-color: var(--border-color)
}

.popup-payment-card-confirmation .popup-container {
    min-height: auto
}

.popup-payment-card-confirmation .input-field-password {
    margin-top: .5rem !important
}

.popup-limit .popup-container {
    min-width: min(100%, 22.5rem)
}

.popup-gift-premium .popup-container {
    padding: 0;
    width: 26.25rem;
    max-width: 26.25rem;
    max-height: min(100%, 43.5rem);
    border-radius: 16px
}

.popup-gift-premium .popup-header {
    height: 3.5rem;
    margin: 0;
    padding: 0 .5rem;
    margin-bottom: -2rem
}

.popup-gift-premium .scrollable-y {
    flex: 1 1 auto;
    padding: 0 1rem 1rem
}

.popup-gift-premium-avatar {
    display: block;
    margin: 0 auto
}

.popup-gift-premium-title, .popup-gift-premium-subtitle {
    text-align: center;
    display: block;
    padding: 0 2rem;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-gift-premium-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    margin: .75rem 0
}

.popup-gift-premium-options {
    display: flex;
    flex-direction: column;
    margin: .5rem 0 1rem
}

.popup-gift-premium-option .row-title {
    text-transform: capitalize
}

.popup-gift-premium-option:nth-child(1) {
    --primary-color: #C564F3
}

.popup-gift-premium-option:nth-child(2) {
    --primary-color: #AC64F3
}

.popup-gift-premium-option:nth-child(3) {
    --primary-color: #9377FF
}

.popup-gift-premium-discount {
    background-color: var(--primary-color);
    border-radius: 6px;
    color: #fff;
    margin-inline-end: .375rem;
    padding: 0 .3125rem;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-13)
}

.popup-gift-premium-confirm {
    --ripple-color: rgba(255, 255, 255, .08);
    background: linear-gradient(88.39deg, #6c93ff -2.56%, #976fff 51.27%, #df69d1 107.39%) !important;
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-transform: uppercase;
    height: 3rem
}

html.no-touch .popup-gift-premium-confirm:hover:after, html.no-touch .popup-gift-premium-confirm:active:after {
    content: " ";
    position: absolute;
    inset: 0;
    background-color: #fff;
    opacity: .08
}

body.animation-level-2 .web-app-header, body.animation-level-2 .web-app-body {
    transition: background-color var(--transition-standard-in)
}

.web-app-fullscreen-buttons {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 999;
    flex-direction: row;
    gap: .5rem;
    display: none
}

.web-app-fullscreen-buttons .btn-icon {
    background-color: #00000040;
    color: #fff
}

html.no-touch .web-app-fullscreen-buttons .btn-icon:hover {
    background-color: #00000060
}

.web-app-body {
    flex: 1 1 auto;
    height: 1px;
    display: flex;
    flex-direction: column
}

.web-app-body.is-fullscreen {
    --browser-width: 100vw
}

.web-app-body.is-fullscreen .web-app-fullscreen-buttons {
    display: flex
}

.web-app-footer {
    --row-count: 1;
    background-color: var(--surface-color);
    height: 0;
    flex: 0 0 auto;
    position: relative
}

.web-app-footer.position-top, .web-app-footer.position-bottom {
    --row-count: 2
}

.web-app-footer:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--border-color);
    content: " ";
    transform: translateY(1px)
}

body.animation-level-2 .web-app-footer:before {
    transition: transform var(--transition-standard-in)
}

body.animation-level-2 .web-app-footer {
    transition: height var(--transition-standard-in)
}

.web-app-footer.is-visible {
    height: calc(44px * var(--row-count) + .5rem * (var(--row-count) + 1) + 1px)
}

.web-app-footer.is-visible:before {
    transform: translateY(0)
}

.web-app-icon {
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    color: var(--secondary-text-color)
}

body.animation-level-2 .web-app-icon {
    transition: opacity var(--transition-standard-in)
}

.web-app-icon .media-photo {
    width: 100%;
    height: 100%
}

.web-app-button {
    display: block;
    text-transform: uppercase;
    padding: 0 1.0625rem;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left: .5rem;
    top: .5rem;
    width: calc(var(--browser-width) - 1rem);
    color: var(--text-color)
}

.has-two-buttons .web-app-button {
    width: calc(var(--browser-width) / 2 - .75rem);
    left: calc(var(--browser-width) / 2 + .25rem)
}

.has-two-buttons .web-app-button.web-app-button-secondary, .position-right .web-app-button {
    left: .5rem
}

.position-right .web-app-button.web-app-button-secondary {
    left: calc(var(--browser-width) / 2 + .25rem)
}

.position-top .web-app-button {
    width: calc(var(--browser-width) - 1rem);
    left: .5rem;
    top: 60px
}

.position-top .web-app-button.web-app-button-secondary {
    top: .5rem
}

.position-bottom .web-app-button {
    width: calc(var(--browser-width) - 1rem);
    left: .5rem;
    top: .5rem
}

.position-bottom .web-app-button.web-app-button-secondary {
    top: 60px
}

.web-app-button .preloader {
    width: 2rem;
    height: 2rem
}

.web-app-button .preloader .preloader-path {
    stroke: var(--text-color)
}

body.animation-level-2 .web-app-button {
    transition-duration: .3s !important;
    transition-timing-function: var(--transition-standard-easing) !important;
    transition-property: opacity, transform, top, left, width !important;
    opacity: 0;
    transform: scale(.9);
    pointer-events: none
}

body.animation-level-2 .web-app-button.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto
}

.popup-web-app {
    --p-secondary-text-color: var(--secondary-text-color);
    --p-light-secondary-text-color: var(--light-secondary-text-color);
    --p-border-color: var(--border-color)
}

.popup-web-app .btn-menu {
    --secondary-text-color: var(--p-secondary-text-color);
    --light-secondary-text-color: var(--p-light-secondary-text-color);
    --border-color: var(--p-border-color)
}

.popup-web-app .popup-body {
    height: auto
}

.popup-chatlist-invite .popup-container {
    height: auto;
    max-height: min(640px, 100%);
    min-width: min(100%, 22.5rem);
    max-width: 22.5rem
}

.popup-chatlist-invite .popup-title {
    height: auto
}

.popup-chatlist-invite .sidebar-left-section-name {
    color: var(--secondary-text-color)
}

.popup-chatlist-invite .sidebar-left-section-name-right {
    cursor: pointer;
    color: var(--primary-color)
}

.popup-chatlist-invite .menu-horizontal-scrollable {
    position: relative;
    pointer-events: none;
    display: flex
}

.popup-chatlist-invite .menu-horizontal-scrollable:after {
    content: none
}

.popup-chatlist-invite .menu-horizontal-scrollable .inner-shadow {
    --inner-shadow-size: 50%;
    z-index: 3
}

.popup-chatlist-invite .menu-horizontal-div {
    width: auto;
    margin: 0 auto
}

.popup-chatlist-invite .menu-horizontal-div-item {
    padding: 0 .5rem
}

.popup-chatlist-invite-description {
    text-align: center;
    margin: 1rem 1.5rem .5rem
}

.popup-chatlist-invite-button-text {
    --badge-size: 1.125rem;
    position: relative
}

.popup-chatlist-invite-button-text:after {
    position: absolute;
    margin-inline-start: .25rem;
    content: attr(data-badge);
    color: var(--primary-color);
    background-color: #fff;
    border-radius: var(--badge-size);
    min-width: var(--badge-size);
    height: var(--badge-size);
    line-height: var(--badge-size);
    font-size: var(--font-size-14);
    padding: 0 .3125rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1
}

body.animation-level-2 .popup-chatlist-invite-button-text:after {
    transition: opacity var(--transition-standard-in)
}

.popup-chatlist-invite-button-text:not(.has-badge):after {
    opacity: 0
}

.popup-chatlist-invite .already .checkbox-field {
    --primary-color: var(--secondary-color)
}

.popup-chatlist-invite .selector-list-section-container .sidebar-left-section {
    min-height: auto !important
}

.popup-chatlist-invite .selector {
    overflow: hidden
}

.popup-chatlist-invite .chatlist-container .scrollable-y {
    height: auto;
    border-bottom: 1px solid transparent
}

.popup-boosts .popup-container {
    padding: 0;
    width: 26.25rem;
    max-width: 26.25rem;
    max-height: min(100%, 43.5rem);
    border-radius: 16px
}

.popup-boosts .popup-header {
    height: 3.5rem;
    margin: 0;
    padding: 0 .5rem
}

.popup-boosts .popup-title {
    margin-left: .5rem
}

.popup-boosts-star {
    width: 140px;
    height: 128px;
    margin-left: -4px;
    margin-top: -2px
}

.popup-boosts-star-container {
    margin: 0 auto -4px;
    text-align: center;
    height: 132px
}

.popup-boosts-title, .popup-boosts-subtitle {
    text-align: center;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-boosts-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-20);
    margin-bottom: .5rem
}

.popup-boosts-subtitle {
    padding: 0 2.5rem;
    line-height: var(--line-height-16);
    margin-bottom: 1rem
}

.popup-boosts-type {
    padding-inline-start: 7.5625rem
}

.popup-boosts-type .row-title {
    font-weight: var(--font-weight-bold)
}

.popup-boosts-type .row-media {
    inset-inline-start: 3.5rem !important
}

.popup-boosts-specific-next {
    font-size: 1rem;
    margin-inline-start: 1px
}

.popup-boosts-badge {
    display: flex;
    align-items: center;
    height: 2rem;
    padding-inline: .5rem .75rem;
    border-radius: 2rem;
    background-color: rgba(var(--primary-color-rgb), .08);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-14);
    color: var(--primary-color);
    position: relative;
    pointer-events: none
}

.popup-boosts-badge-icon {
    font-size: 1.125rem
}

.popup-boosts-channel .row-media {
    inset-inline-start: .4375rem !important
}

.popup-boosts-button {
    display: flex !important;
    align-items: center;
    justify-content: center
}

.popup-boosts-button-badge {
    margin-inline-start: .625rem;
    background-color: #fff;
    padding-inline: .125rem .25rem;
    height: 1.125rem;
    border-radius: .25rem;
    display: flex;
    color: var(--primary-color);
    align-items: center;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold)
}

.popup-boosts-button-badge-icon {
    font-size: .8125rem
}

.popup-boosts-additional-row {
    height: 3rem;
    padding: 0 1rem;
    display: flex;
    align-items: center
}

.popup-boosts-additional-row-count {
    flex: 0 0 auto;
    width: 2.5rem
}

.popup-boosts-additional-row-input {
    flex: 1 1 auto
}

.popup-boosts-stars-row .row-right {
    color: var(--secondary-text-color)
}

html.no-touch .popup-boosts-stars-row:hover .stars-stacked, html.no-touch .popup-boosts-stars-row:active .stars-stacked {
    --star-background-color: var(--background-color)
}

.popup-boosts-stars-amount .stars-stacked {
    --star-background-color: var(--surface-color);
    --background-offset: 11px;
    display: inline-flex;
    vertical-align: middle;
    margin-inline-start: -.25rem
}

.popup-boosts .scrollable-y {
    border-top: none !important
}

.popup-boosts .sidebar-left-section {
    --link-color: var(--primary-color);
    box-shadow: none !important;
    margin-bottom: 0 !important
}

.popup-boosts .sidebar-left-section:not(.no-delimiter) {
    border-top: 1px solid var(--border-color)
}

.popup-boosts .sidebar-left-section-name-right {
    height: 0;
    margin-top: -3px;
    margin-right: -8px
}

.popup-boosts .sidebar-left-section-caption {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16);
    margin-top: .75rem
}

.popup-boosts .range-steps-selector {
    --option-width: .25rem;
    --option-height: .5rem;
    height: 5.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 3.6875rem
}

.popup-boosts .range-steps-selector .progress-line {
    --height: 3px;
    --thumb-size: 1.5rem
}

.popup-boosts .range-setting-selector-option {
    font-weight: var(--font-weight-bold)
}

.popup-boosts .range-setting-selector-option-text {
    top: -2.625rem;
    font-size: var(--font-size-13)
}

.popup-boosts .range-setting-selector-option.is-chosen {
    color: var(--primary-color)
}

.popup-boosts .popup-gift-premium-options {
    margin: 0
}

.popup-boosts .popup-gift-premium-option {
    --primary-color: rgb(var(--primary-color-rgb)) !important
}

.popup-boosts .is-flex {
    display: flex;
    align-items: center
}

.popup-premium {
    border-bottom: .0625rem solid transparent
}

.popup-premium .popup-container {
    padding: 0;
    height: 660px;
    border-radius: 16px;
    display: flex;
    flex-direction: column
}

.popup-premium .popup-container.no-button {
    height: 580px
}

.popup-premium .popup-close {
    visibility: visible
}

.popup-premium .popup-header {
    top: 0;
    right: 0;
    left: 0;
    position: sticky;
    margin-bottom: 0;
    padding: .5rem;
    z-index: 1;
    visibility: hidden;
    transition-delay: var(--popup-transition-time)
}

body.animation-level-2 .popup-premium .popup-header {
    transition: visibility 0s var(--popup-transition-time)
}

.popup-premium .popup-header-background {
    opacity: 0
}

body.animation-level-2 .popup-premium .popup-header-background {
    transition: border-color var(--popup-transition), opacity var(--popup-transition)
}

.popup-premium .popup-header.absolute {
    position: absolute
}

.popup-premium .popup-header.not-top .popup-header-background {
    border-color: var(--border-color)
}

.popup-premium .popup-header.is-visible {
    visibility: visible;
    transition-delay: 0s !important
}

.popup-premium .popup-header.is-visible .popup-header-background, .popup-premium .popup-header.is-visible .popup-title {
    opacity: 1
}

.popup-premium .popup-title {
    opacity: 0
}

body.animation-level-2 .popup-premium .popup-title {
    transition: opacity var(--popup-transition)
}

.popup-premium .popup-body {
    overflow: visible;
    margin-top: -1.5rem;
    padding: 0 .5rem;
    position: relative
}

.popup-premium .popup-gift-premium-options {
    margin: .5rem 0 -.5rem
}

.popup-premium .action-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem
}

@media only screen and (max-width: 600px) {
    .popup-premium .action-button {
        font-size: .875rem
    }
}

.popup-premium .action-button-container {
    padding: 1rem;
    background-color: var(--surface-color);
    flex: 0 0 auto
}

.popup-premium .action-button-icon {
    font-size: 24px;
    margin-left: 10px
}

.popup-premium-heading-text-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 32px;
    margin: .375rem 0
}

.popup-premium-heading-text-title.smaller-text {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18);
    margin-top: .625rem
}

.popup-premium-heading-text-description {
    text-align: center;
    font-size: var(--font-size-16);
    line-height: 22px
}

.popup-premium-heading-text-container {
    margin-top: calc(100px - .75rem);
    padding: 0 .625rem
}

.popup-premium-features-container {
    margin: 1rem 0 .5rem
}

.popup-premium-header-image {
    height: 100%
}

.popup-premium-header-image-container {
    text-align: center;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -.75rem
}

.popup-premium-status-text {
    color: var(--secondary-text-color);
    margin: 1rem .5rem 0;
    white-space: pre-wrap;
    font-size: var(--font-size-16);
    line-height: var(--line-height-16)
}

.popup-premium .premium-promo-tab {
    border-bottom: 1px solid transparent
}

body.animation-level-2 .popup-premium .premium-promo-tab {
    transition: border-color var(--popup-transition)
}

.popup-premium .premium-promo-tab.not-bottom {
    border-color: var(--border-color)
}

.popup-premium .premium-promo-tab-icon {
    color: #fff;
    border-radius: 10px;
    font-size: 1.5rem
}

.popup-premium .premium-tabs {
    width: 420px;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 0;
    overflow: hidden
}

@media only screen and (max-width: 600px) {
    .popup-premium .premium-tabs {
        width: 330px
    }
}

.popup-premium .premium-tab {
    background-color: var(--surface-color);
    position: relative
}

.popup-premium .carousel-item {
    background: none
}

.popup-premium .carousel-item.slide-left .device-frame {
    --scroll-progress: 4;
    --abs-scroll-progress: -2
}

.popup-premium .carousel-item.slide-left .device-frame.bottom {
    --abs-scroll-progress: 0
}

.popup-premium .carousel-item.slide-right .device-frame {
    --scroll-progress: -4;
    --abs-scroll-progress: -2
}

.popup-premium .carousel-item.slide-right .device-frame.bottom {
    --abs-scroll-progress: 0
}

.popup-premium .device-frame {
    --y-static: -5%;
    --y-dynamic: -10%;
    --abs-scroll-progress-converted: var(--abs-scroll-progress, -1);
    --scroll-progress-converted: var(--scroll-progress, 0);
    position: relative;
    overflow: hidden;
    border-radius: 36px 36px 0 0;
    transform: perspective(200px) translate3d(0, calc(var(--y-static) + var(--abs-scroll-progress-converted) * var(--y-dynamic)), 0) rotateY(calc(var(--scroll-progress-converted) * -5deg))
}

body.animation-level-2 .popup-premium .device-frame {
    transition: transform var(--transition-standard-in)
}

@media only screen and (max-width: 600px) {
    .popup-premium .device-frame {
        width: 100%
    }

    .popup-premium .device-frame:not(.bottom) {
        --y-static: 3%
    }
}

.popup-premium .device-frame.bottom {
    --y-static: -41.3%;
    border-radius: 0 0 36px 36px
}

.popup-premium .device-frame.bottom .media-video {
    top: 28.3%;
    border-radius: 0 0 36px 36px
}

.popup-premium .device-frame.bottom .shimmer {
    margin: 6% 4%
}

.popup-premium .device-frame.bottom .device-frame-preload-icon {
    top: 50%
}

.popup-premium .device-frame-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%
}

.popup-premium .device-frame-preload-icon {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    opacity: .7;
    font-size: 90px;
    color: #fff
}

.popup-premium .device-frame .shimmer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1
}

.popup-premium .device-frame .media-video, .popup-premium .device-frame .thumbnail {
    max-width: 100%;
    padding: 4%;
    border-radius: 36px 36px 0 0
}

.popup-premium .carousel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between
}

.popup-premium .carousel-items-container {
    background: var(--premium-gradient);
    background-size: 100% 420px;
    background-repeat: no-repeat
}

.popup-premium .carousel-item.feature-background {
    background-color: var(--surface-color);
    width: 100%;
    height: 529px !important
}

.popup-premium .carousel-item.feature-background .above-top-section {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    align-self: center
}

.popup-premium .carousel-item.feature-background .above-top-section-title {
    margin: 1rem 0
}

.popup-premium .carousel-item.feature-background .carousel-item-content-top-section {
    height: 473px !important
}

.popup-premium .carousel-item.feature-background .carousel-item-content-top-section .limit-text-container {
    margin-top: 1rem;
    display: flex;
    padding: 8px 12px 7px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch
}

.popup-premium .carousel-item.feature-background .carousel-item-content-top-section .limit-text-container.no-margin {
    margin-top: 0
}

.popup-premium .carousel-item.feature-background .carousel-item-content-top-section .limit-text-container .limit-title {
    color: var(--primary-text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px
}

.popup-premium .carousel-item.feature-background .carousel-item-content-top-section .limit-text-container .limit-subtitle {
    color: var(--secondary-text-color);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px
}

.popup-premium .carousel-item:not(.feature-background) .carousel-item-content-top-section {
    overflow: hidden
}

.popup-premium .carousel-item-content-top-section {
    height: 26.25rem;
    padding: 0 4.25rem 1.5rem;
    flex: 0 0 auto
}

@media only screen and (max-width: 600px) {
    .popup-premium .carousel-item-content-top-section {
        padding: 0 1.5rem
    }
}

.popup-premium .carousel-item-content-top-section.no-padding {
    padding: 0
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel {
    position: relative
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel .emoji-animation {
    top: 50px !important;
    left: 80px !important
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item {
    --transition: var(--transition-standard-in);
    margin: .5rem 0;
    display: none;
    position: absolute;
    transition: width var(--transition), height var(--transition), top var(--transition), right var(--transition), left var(--transition), opacity var(--transition);
    right: 0
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item .super-sticker:hover {
    background-color: transparent
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.top-sibling, .popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.bottom-sibling {
    display: block;
    width: 150px;
    height: 150px;
    opacity: .6
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.top-sibling {
    top: -120px;
    right: 300%
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.top-sibling.visible {
    top: -56px;
    right: 50%
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.bottom-sibling {
    top: 432px;
    right: 300%
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.bottom-sibling.visible {
    top: 326px;
    right: 50%
}

.popup-premium .carousel-item-content-top-section .premium-stickers-carousel-item.active {
    display: block;
    width: 220px;
    height: 220px;
    top: 100px;
    left: 160px
}

.popup-premium .carousel-item-content-top-section.top-margin {
    margin-top: 3.5rem
}

.popup-premium .carousel-item-content-top-section.scrollable {
    border-bottom: .0625rem solid transparent;
    border-top: .0625rem solid transparent;
    padding: 0 1rem 1rem
}

.popup-premium .carousel-item-content-top-section.scrollable.top-border {
    border-top: .0625rem solid var(--border-color)
}

.popup-premium .carousel-item-content-top-section.scrollable.bottom-border {
    border-bottom: .0625rem solid var(--border-color)
}

.popup-premium .carousel-item-content-bottom-section {
    padding: 1.5rem 1rem 0
}

@media only screen and (max-width: 600px) {
    .popup-premium .carousel-item-content-bottom-section {
        padding: 1.5rem 1rem
    }
}

.popup-premium .carousel-item-content-bottom-section .carousel-item-content-title {
    text-align: center;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: 30px
}

.popup-premium .carousel-item-content-bottom-section .carousel-item-content-subtitle {
    text-align: center;
    color: var(--secondary-text-color);
    margin-top: 4px;
    font-size: var(--font-size-16);
    line-height: 22px;
    padding: 0 2rem
}

@media only screen and (max-width: 600px) {
    .popup-premium .carousel-item-content-bottom-section .carousel-item-content-subtitle {
        padding: 0
    }
}

.popup-premium .upgraded-stories .carousel-item-content-top-section {
    height: auto !important;
    flex: 1 1 auto
}

.popup-premium-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 8.375rem;
    overflow: hidden;
    height: 3.25rem;
    transform: translate(-50%)
}

.popup-premium-controls-dots {
    --dots-color: var(--border-color);
    --dot-width: 1.125rem;
    --count: 8;
    --center: calc((var(--amount) * var(--dot-width)) / 2);
    display: flex;
    gap: .625rem;
    min-height: .5rem;
    justify-content: center;
    align-items: center;
    margin-top: -.0625rem;
    transform: translate(calc(var(--center) - var(--dot-width) * var(--count) / 2 - var(--dot-width) * var(--start)))
}

body.animation-level-2 .popup-premium-controls-dots {
    transition: transform var(--transition-standard-in)
}

.night .popup-premium-controls-dots {
    --dots-color: var(--secondary-text-color)
}

.popup-premium-controls-dot {
    width: .5rem;
    height: .5rem;
    background-color: var(--dots-color);
    border-radius: 50%;
    cursor: pointer
}

body.animation-level-2 .popup-premium-controls-dot {
    transition: background-color var(--transition-standard-in), transform var(--transition-standard-in)
}

.popup-premium-controls-dot.active {
    background-color: #8f77ff
}

.popup-premium .invite-link-container {
    margin: .5rem -.625rem -.5rem
}

.popup-boost {
    --popup-min-width: 360px;
    --popup-max-width: 360px
}

.popup-boost .popup-header {
    align-items: unset;
    min-height: 2.5rem;
    height: auto
}

.popup-boost .popup-title {
    display: flex;
    align-items: center;
    padding: 0;
    white-space: pre-wrap;
    word-break: break-word
}

.popup-boost .popup-description {
    margin-bottom: .75rem;
    text-align: center;
    flex: 0 0 auto
}

.popup-boost-entity {
    flex: 0 1 auto;
    margin: .375rem auto 0;
    display: inline-flex;
    vertical-align: middle;
    max-width: 90%;
    position: relative;
    overflow: unset
}

.popup-boost-entity-badge {
    position: absolute;
    top: -.5rem;
    inset-inline-end: -1rem;
    color: #fff;
    background-color: var(--premium-color);
    border-radius: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    pointer-events: none
}

.popup-boost-title {
    font-size: 1.25rem;
    text-align: center;
    font-weight: var(--font-weight-bold);
    flex: 0 0 auto;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-boost-avatars {
    --size: 4rem;
    --unfolded-translateX: calc(var(--size) / 2 + .875rem);
    height: var(--size);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .75rem 0 .625rem;
    flex: 0 0 auto
}

.popup-boost-avatars-arrow {
    color: var(--secondary-color);
    font-size: 1.625rem
}

.popup-boost-avatars-left, .popup-boost-avatars-right {
    position: absolute;
    display: grid;
    grid-template-columns:100%;
    grid-template-rows:100%;
    width: var(--size);
    height: var(--size)
}

.popup-boost-avatars-avatar {
    border: 2px solid var(--surface-color);
    box-sizing: content-box
}

.popup-boost-avatars-avatar-container {
    grid-row-start: 1;
    grid-column-start: 1;
    transform: translate(var(--offset, 0));
    transform-origin: var(--transform-origin-right-center)
}

body.animation-level-2 .popup-boost-avatars-avatar-container {
    transition: transform .2s ease-in-out
}

.popup-boost-avatars-avatar-icon {
    font-size: 1.5rem;
    color: var(--premium-color);
    position: absolute;
    bottom: -.125rem;
    right: -.125rem;
    background-color: #fff;
    border-radius: 50%;
    transform: scale(0)
}

.popup-boost-avatars-avatar-icon.is-visible {
    transform: scale(1)
}

body.animation-level-2 .popup-boost-avatars-avatar-icon {
    transition: transform .2s ease-in-out
}

.popup-boost-avatars-avatar-icon:before {
    content: " ";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--surface-color);
    border-radius: inherit
}

.popup-boost-avatars, .popup-boost-avatars-left, .popup-boost-avatars-right {
    transform: translate(0)
}

body.animation-level-2 .popup-boost-avatars, body.animation-level-2 .popup-boost-avatars-left, body.animation-level-2 .popup-boost-avatars-right {
    transition: transform var(--transition-standard-in)
}

.popup-boost-avatars.has-left .popup-boost-avatars-left {
    transform: translate(calc(var(--unfolded-translateX) * -1))
}

.popup-boost-avatars.has-left .popup-boost-avatars-right {
    transform: translate(var(--unfolded-translateX))
}

.popup-boost .is-unavailable {
    opacity: .6
}

.popup-boost .sidebar-left-section-name {
    color: var(--primary-color) !important
}

.popup-gift-link {
    --link-color: var(--primary-color);
    word-break: break-word
}

.popup-gift-link-header {
    text-align: center;
    margin: 1.5rem 0 1rem
}

.popup-gift-link-image {
    width: 120px;
    height: 120px
}

.popup-gift-link-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-20);
    margin-bottom: .25rem
}

.popup-gift-link-wrapper {
    padding: 0 1rem
}

.popup-gift-link-share {
    text-align: center
}

.popup-gift-link .invite-link-container {
    padding: 0
}

.popup-toggle-read-date {
    --popup-min-width: 24rem;
    --popup-max-width: 24rem;
    text-align: center;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-toggle-read-date .popup-header {
    margin-bottom: 0
}

.popup-toggle-read-date .popup-body {
    margin-top: -2rem
}

.popup-toggle-read-date-sticker {
    width: 86px;
    height: 86px;
    position: relative;
    border-radius: 50%;
    background-color: var(--primary-color);
    margin: 0 auto 1rem
}

.popup-toggle-read-date-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-20);
    margin-bottom: .25rem
}

.popup-toggle-read-date-subtitle {
    line-height: var(--line-height-16)
}

.popup-toggle-read-date-button {
    height: 3rem;
    text-transform: initial;
    margin-top: 1rem
}

.popup-toggle-read-date .delimiter-with-text {
    margin: 1.25rem 0 .875rem;
    padding: 0 2.25rem
}

.popup-confirmation .input-field {
    margin: .75rem .75rem .5rem
}

.popup-translate {
    --popup-min-width: 20rem;
    --popup-max-width: 25rem
}

.popup-translate .popup-container {
    padding: 0;
    max-height: calc(100vh - 5rem)
}

.popup-translate .popup-buttons {
    margin-top: .25rem;
    margin-bottom: .25rem;
    margin-inline: .25rem
}

.popup-translate .scrollable-y {
    position: relative;
    max-height: calc(100vh - 5rem);
    margin: 0 -1.5rem;
    width: calc(100% + 3rem);
    padding: 0 1.5rem;
    border-top: none !important
}

.popup-translate-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    padding: 0 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: var(--line-height-16)
}

.popup-translate-text.is-limited {
    display: flex
}

.popup-translate-text.is-limited .popup-translate-text-text {
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-translate-text-more {
    flex: 0 0 auto;
    cursor: pointer;
    position: relative
}

.popup-translate-preloader {
    position: relative;
    height: 10rem
}

.popup-report-ad .popup-header {
    margin: 0;
    padding-bottom: .5rem
}

.popup-report-ad .popup-header .transition {
    height: 3rem
}

.popup-report-ad .popup-header .transition-item {
    display: flex;
    justify-content: center;
    flex-direction: column
}

.popup-report-ad .popup-container {
    max-height: calc(100vh - 5rem);
    padding-bottom: 0;
    padding-top: .5rem
}

.popup-report-ad .popup-body {
    margin: 0 -1rem
}

.popup-report-ad .popup-close {
    margin-inline-end: 1rem
}

.popup-report-ad .popup-title {
    overflow: unset
}

.popup-report-ad-header-title {
    font-size: var(--font-size-16);
    line-height: 20px
}

.popup-report-ad-header-subtitle {
    font-size: var(--font-size-14);
    line-height: 18px;
    color: var(--secondary-text-color);
    font-weight: var(--font-weight-normal)
}

.popup-report-ad-tab {
    width: 22rem;
    background-color: var(--surface-color) !important;
    padding-bottom: 1rem
}

.popup-report-ad-tab .sidebar-left-section {
    padding-top: 0 !important
}

body.animation-level-2 .popup-report-ad-tab-options {
    transition: height var(--transition-standard-in)
}

.popup-report-ad-comment-caption {
    margin-top: -147px !important
}

.popup-report-ad .row-right {
    display: flex;
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-inline-end: -.8125rem
}

.popup-report-ad .sidebar-left-section-caption {
    font-size: 1rem
}

.popup-report-ad .media-sticker-wrapper {
    width: 130px;
    height: 130px;
    position: relative;
    margin: 0 auto
}

.popup-report-ad .input-field {
    margin: 1rem .5rem 0
}

.popup-report-ad-send-button {
    margin: 1rem 1rem 0;
    width: auto;
    text-transform: uppercase
}

.popup-about-ad {
    --popup-max-width: 420px;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-about-ad .popup-container {
    max-height: calc(100vh - 5rem);
    padding-bottom: 0
}

.popup-about-ad .popup-body {
    margin: 0 -1rem
}

.popup-about-ad .popup-footer {
    padding: 1rem
}

.popup-about-ad-title {
    margin-top: .5rem;
    margin-bottom: .125rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-16)
}

.popup-about-ad-subtitle {
    color: var(--secondary-text-color);
    margin-bottom: 1rem;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14)
}

.popup-about-ad-title, .popup-about-ad-subtitle {
    text-align: center;
    padding: 0 3rem
}

.popup-about-ad .row {
    justify-content: unset
}

.popup-about-ad .row-icon {
    color: var(--primary-color);
    top: auto;
    transform: unset
}

.popup-about-ad-caption {
    background-color: var(--light-filled-secondary-text-color);
    border-radius: 12px;
    padding: .625rem 1.25rem;
    text-align: center;
    line-height: var(--line-height-16);
    margin: 1rem .5rem 0
}

.popup-about-ad-caption-title {
    font-weight: var(--font-weight-bold);
    margin-bottom: .125rem
}

.popup-about-ad-caption-subtitle {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14)
}

.popup-about-ad-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.375rem;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 50%;
    width: 5.5rem;
    height: 5.5rem;
    margin: .5rem auto 1rem
}

.popup-about-ad .scrollable-y {
    padding: 0 .5rem
}

.popup-delete-megagroup-messages {
    --popup-max-width: 420px;
    --popup-min-width: 360px;
    --disabled-opacity: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-delete-megagroup-messages .popup-container {
    max-height: calc(100vh - 5rem);
    padding: .75rem .5rem 0
}

.popup-delete-megagroup-messages .popup-body {
    margin: 0 -.5rem
}

.popup-delete-megagroup-messages .popup-header {
    height: 2.5rem;
    margin: 0;
    margin-bottom: .75rem;
    padding: 0 1rem;
    gap: 1rem
}

.popup-delete-megagroup-messages .popup-buttons {
    margin: .75rem 0
}

.popup-delete-megagroup-messages-row {
    margin-inline-start: 3.375rem;
    padding-inline-start: 3.5rem
}

.popup-delete-megagroup-messages-row-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: var(--font-weight-bold)
}

.popup-delete-megagroup-messages-expand-row {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: .5rem
}

.popup-delete-megagroup-messages-expand-row-icon {
    transform: rotate(0)
}

.popup-delete-megagroup-messages-expand-row.is-expanded .popup-delete-megagroup-messages-expand-row-icon {
    transform: rotate(180deg)
}

.popup-delete-megagroup-messages-permissions {
    overflow: hidden
}

body.animation-level-2 .popup-delete-megagroup-messages-permissions {
    transition: max-height var(--transition-standard-in)
}

.popup-delete-megagroup-messages-avatars {
    --margin-right: -1.125rem;
    --border-size: 2px
}

.popup-delete-megagroup-messages .scrollable-y {
    padding: 0 .5rem
}

.popup-delete-megagroup-messages .scrollable-y .scrollable-thumb-container {
    display: none
}

.popup-delete-megagroup-messages .sidebar-left-section {
    margin-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.popup-stars {
    --popup-min-width: 26.25rem;
    --popup-max-width: 26.25rem
}

.popup-stars .popup-header {
    height: 3.5rem;
    padding-inline: .5rem
}

.popup-stars .popup-header .stars-balance {
    margin-top: .25rem;
    margin-inline-end: .75rem
}

.popup-stars .popup-container {
    max-height: calc(100vh - 5rem);
    padding: 0;
    border-radius: 1rem
}

.popup-stars .popup-body {
    background-color: var(--background-color)
}

.popup-stars .popup-close {
    margin-inline-end: 1rem
}

.popup-stars .popup-title {
    overflow: unset
}

.popup-stars-image {
    width: 194px;
    margin: 1.125rem auto .3125rem;
    display: block;
    transform: translate(-3px)
}

.popup-stars-title, .popup-stars-subtitle {
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    text-wrap: balance
}

.popup-stars-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 2rem
}

.popup-stars-subtitle {
    line-height: 1.375rem;
    margin-top: .375rem
}

.popup-stars-subtitle.mt {
    margin-top: .5rem
}

.popup-stars-options {
    margin-top: 1.5rem;
    margin: 1.5rem .5rem .5rem;
    overflow: hidden;
    position: relative
}

@media only screen and (max-width: 600px) {
    .popup-stars-options {
        margin-left: 0;
        margin-right: 0
    }
}

body.animation-level-2 .popup-stars-options {
    transition: height var(--transition-standard-in)
}

.popup-stars-option {
    --background-color: var(--light-filled-secondary-text-color);
    height: 79px;
    border-radius: 10px;
    background-color: var(--background-color);
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: calc(50% - .25rem);
    opacity: 1
}

body.animation-level-2 .popup-stars-option {
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in), width var(--transition-standard-in)
}

.popup-stars-option.invisible {
    opacity: 0;
    pointer-events: none
}

.popup-stars-option.full {
    width: 100%
}

.popup-stars-option-title {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    height: 1.75rem
}

.popup-stars-option-subtitle {
    font-size: var(--font-size-14);
    line-height: var(--line-height-16);
    color: var(--secondary-text-color);
    height: 1.3125rem
}

.popup-stars-more {
    font-weight: var(--font-weight-bold);
    justify-content: center;
    align-items: unset;
    height: 0rem;
    line-height: 3rem
}

.popup-stars-more.is-visible {
    height: 3rem
}

body.animation-level-2 .popup-stars-more {
    transition: height var(--transition-standard-in) !important
}

@media only screen and (min-width: 601px) {
    .popup-stars-more {
        margin: 0 .5rem !important;
        width: calc(100% - 1rem) !important
    }
}

.popup-stars-more .button-icon {
    margin-inline: .25rem 0;
    order: 1;
    line-height: inherit
}

.popup-stars-transactions-section .sidebar-left-section {
    padding: 0 !important
}

.popup-stars-transactions-section .sidebar-left-section-content {
    margin: 0 !important
}

.popup-stars-transactions-tab {
    border-radius: 0 !important
}

.popup-stars-transactions-content {
    padding: .5rem
}

.popup-stars-transaction-media {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--premium-gradient)
}

.popup-stars-transaction-media.is-paid-media {
    border-radius: 12px;
    width: inherit !important;
    height: inherit !important
}

.popup-stars-transaction-media-counter {
    color: #fff;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-shadow: 0px 0 3px rgba(0, 0, 0, .45)
}

.popup-stars-cancelled {
    font-size: var(--font-size-13)
}

.popup-stars-gift-avatar {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translate(-50%)
}

.popup-stars .media-photo {
    width: inherit;
    height: inherit;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.popup-stars-pay .popup-header {
    margin-bottom: 0
}

.popup-stars-pay .popup-body {
    background-color: var(--surface-color);
    margin: -3.5rem 0 1rem
}

.popup-stars-pay .popup-body.is-receipt {
    margin-bottom: 0
}

.popup-stars-pay .popup-body.is-receipt .popup-stars-pay-amount {
    display: flex
}

.popup-stars-pay .popup-body.is-receipt .popup-stars-pay-amount.reverse {
    flex-direction: row-reverse
}

.popup-stars-pay .popup-body.is-receipt .popup-stars-pay-amount.inline {
    display: inline-flex
}

.popup-stars-pay .popup-body .scrollable-y {
    border: none
}

.popup-stars-pay .popup-body .scrollable-thumb-container {
    display: none
}

.popup-stars-pay .popup-footer .button-icon {
    font-size: 18.5px;
    vertical-align: bottom;
    line-height: inherit;
    margin-inline-start: .25rem
}

.popup-stars-pay-images {
    position: absolute;
    top: 2.625rem;
    inset-inline: 0;
    display: flex;
    justify-content: center
}

.popup-stars-pay-item {
    width: 90px !important;
    height: 90px !important;
    position: relative;
    border-radius: 50%;
    margin-right: -1.25rem;
    outline: 4px solid var(--surface-color);
    z-index: 1;
    background-color: var(--surface-color)
}

.popup-stars-pay-sticker {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: -1rem
}

.popup-stars-pay-tos {
    color: var(--secondary-text-color);
    text-align: center;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden
}

.popup-stars-pay-tos2 {
    margin-top: 1.5rem
}

.popup-stars-pay-amount {
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: bottom;
    gap: .125rem
}

.popup-stars-pay-amount .currency-star-icon {
    width: 1.125rem;
    height: 1.125rem
}

.popup-stars-pay-amount-status {
    background-color: rgba(var(--green-color-rgb), .1);
    border-radius: 8px;
    padding: 0 .375rem
}

.popup-stars-pay-padding {
    padding: 0 1rem
}

.popup-stars-pay-avatar {
    width: 90px;
    height: 90px;
    position: relative
}

.popup-stars-pay-avatar .popup-stars-transaction-media {
    font-size: 3rem
}

.popup-stars-pay-boosts {
    display: inline-flex;
    align-items: center;
    background-color: var(--premium-color);
    border-radius: .75rem;
    height: 1.5rem;
    color: #fff;
    padding-inline: .25rem .5rem;
    font-size: var(--font-size-14);
    gap: .125rem
}

.popup-stars-pay .monospace-text {
    cursor: pointer
}

.popup-stars-pay .popup-stars-image {
    margin-top: 1.6875rem
}

.popup-stars-pay .popup-stars-transaction-media-counter {
    font-size: 2.5rem
}

.popup-stars-pay .popup-stars-pay-table {
    margin-block: 1.375rem 1rem
}

.popup-star-reaction .popup-header {
    margin-bottom: -.25rem;
    z-index: 2
}

.popup-star-reaction .popup-body {
    background-color: var(--surface-color)
}

.popup-star-reaction .popup-footer .button-icon {
    font-size: 18.5px;
    vertical-align: bottom;
    line-height: inherit;
    margin-inline-start: .25rem
}

.popup-star-reaction .popup-stars-send-as {
    background: var(--limit-line-empty-background);
    padding: .25rem .5rem .25rem .25rem;
    border-radius: 1rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: .75rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    cursor: pointer
}

.popup-star-reaction .popup-stars-send-as .tgico {
    font-size: .75rem
}

.popup-star-reaction .popup-stars-send-as .new-message-send-as-container {
    background: none !important;
    position: relative;
    width: 1.5rem;
    height: 1.5rem
}

.popup-star-reaction .popup-stars-send-as .new-message-send-as-close {
    display: none
}

.popup-star-reaction .popup-stars-send-as .new-message-send-as-avatar {
    --size: 1.5rem;
    position: absolute;
    transform: scale(0);
    opacity: 0;
    pointer-events: none
}

.popup-star-reaction .popup-stars-send-as .new-message-send-as-avatar.is-visible:not(.backwards) {
    transform: scale(1);
    opacity: 1
}

.popup-star-reaction .popup-stars-send-as .new-message-send-as-avatar.is-visible.animating {
    transition: transform var(--transition-standard-in), opacity var(--transition-standard-in)
}

.popup-star-reaction .popup-stars-send-as .btn-menu {
    max-height: 20rem;
    max-width: 20rem;
    width: auto;
    height: auto;
    z-index: 4
}

.popup-star-reaction .popup-stars-send-as .btn-menu-item {
    height: 2.25rem
}

.popup-star-reaction .popup-stars-send-as .btn-menu-item-header {
    height: 1.875rem
}

.popup-star-reaction .popup-stars-send-as .btn-menu-item-icon {
    margin-inline-end: calc(var(--icon-margin) - .5rem)
}

.popup-star-reaction .popup-stars-send-as .btn-menu-item-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1 !important;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.popup-star-reaction .popup-stars-send-as .btn-menu-item-subtitle {
    font-size: .8125rem;
    font-weight: 400
}

.popup-star-reaction-senders-delimiter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: 0 1rem;
    margin-top: 1.625rem
}

.popup-star-reaction-senders-line {
    height: .5px;
    background-color: var(--border-color);
    flex: 1 1 auto
}

.popup-star-reaction-senders-text {
    height: 2.125rem;
    border-radius: 1.0625rem;
    color: #fff;
    font-size: var(--font-size-15);
    line-height: 2.125rem;
    padding: 0 1rem;
    background: linear-gradient(90deg, #fa0, #ffcd3a);
    flex: 0 0 auto;
    font-weight: var(--font-weight-bold);
    letter-spacing: -.4px
}

.popup-star-reaction-senders-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 1.375rem
}

.popup-star-reaction-senders-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    padding: .5rem .75rem;
    margin: -.5rem -.75rem;
    width: 5.25rem
}

.popup-star-reaction-senders-item.is-clickable {
    cursor: pointer;
    border-radius: .75rem
}

.popup-star-reaction-senders-item.is-clickable:hover {
    background-color: var(--light-secondary-text-color)
}

.popup-star-reaction-senders-item-anonymous {
    width: 60px;
    height: 60px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.popup-star-reaction-senders-item-anonymous img {
    width: 43px
}

.popup-star-reaction-senders-item .peer-title {
    font-size: var(--font-size-11);
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.popup-star-reaction-senders-avatar-wrap {
    position: relative;
    pointer-events: none
}

.popup-star-reaction-senders-amount {
    position: absolute;
    bottom: -.25rem;
    left: 50%;
    transform: translate(calc(-50% + 1px));
    font-size: .75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: .125rem .313rem .125rem .25rem;
    gap: .125rem;
    background: linear-gradient(90deg, #fa0, #ffcd3a);
    border-radius: 999px;
    border: .125rem solid var(--surface-color);
    color: #fff;
    font-family: var(--font-rounded);
    font-variant-numeric: tabular-nums
}

.popup-star-reaction-checkbox {
    display: flex;
    justify-content: center;
    margin-top: 1rem
}

.popup-star-reaction-checkbox-row {
    padding-inline-start: 3.5rem;
    border-radius: 10px
}

.popup-star-reaction .popup-stars-slider {
    margin: 4.25rem 1rem 1.75rem;
    position: relative
}

.popup-star-reaction .popup-stars-slider .sparkles-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: 1rem;
    color: #fff
}

.popup-star-reaction .popup-stars-slider .progress-line {
    --height: 1.875rem;
    --thumb-size: 1.625rem;
    --focus-scale: 1;
    width: 100%;
    border-radius: 1rem;
    background-color: var(--limit-line-empty-background);
    z-index: 1
}

.popup-star-reaction .popup-stars-slider .progress-line__filled {
    border-radius: inherit;
    min-width: var(--height);
    background: linear-gradient(90deg, #fa0, #ffcd3a);
    width: calc(var(--progress) * 100% + var(--height) * (1 - var(--progress)))
}

.popup-star-reaction .popup-stars-slider .progress-line__filled:after {
    background-color: #fff;
    inset-inline-end: .9375rem;
    box-shadow: 0 1px 2px #0000001a;
    z-index: 2
}

.popup-star-reaction .popup-stars-slider-hint {
    height: 3rem;
    position: absolute;
    left: var(--left);
    top: -4.1875rem;
    font-size: 1.5rem;
    padding: 0 .875rem 0 .625rem;
    background: linear-gradient(90deg, #fa0, #ffcd3a);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: .375rem;
    z-index: 0;
    color: #fff;
    font-family: var(--font-rounded);
    font-variant-numeric: tabular-nums
}

.popup-star-reaction .popup-stars-slider-hint .animated-counter {
    z-index: 2
}

.popup-star-reaction .popup-stars-slider-hint .animated-counter-decimal {
    overflow: hidden
}

.popup-star-reaction .popup-stars-slider-hint-tail {
    content: "";
    position: absolute;
    transform: translateY(var(--translate-y));
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(90deg, #fa0, #ffcd3a);
    background-size: 100px auto;
    background-position-x: calc(100px - var(--tail-left-relative) * 65px);
    -webkit-clip-path: path("M0.5 0H44.5H36.9853C35.394 0 33.8679 0.632141 32.7426 1.75736L25.3284 9.17157C23.7663 10.7337 21.2337 10.7337 19.6716 9.17157L12.2574 1.75736C11.1321 0.632141 9.60602 0 8.01472 0H0.5Z");
    clip-path: path("M0.5 0H44.5H36.9853C35.394 0 33.8679 0.632141 32.7426 1.75736L25.3284 9.17157C23.7663 10.7337 21.2337 10.7337 19.6716 9.17157L12.2574 1.75736C11.1321 0.632141 9.60602 0 8.01472 0H0.5Z")
}

.popup-star-reaction .popup-stars-slider-hint-tail-container {
    position: absolute;
    width: 46px;
    height: 12px;
    left: var(--tail-left);
    bottom: 38px
}

.popup-star-reaction .popup-stars-slider-hint .tgico {
    font-size: 1.625rem
}

.popup-star-reaction .popup-stars-slider-hint .sparkles-container {
    position: absolute;
    inset: -.25rem;
    z-index: 1;
    color: #ffe390;
    font-size: .5rem;
    overflow: visible
}

.popup-star-reaction .stars-balance {
    margin-left: auto
}

.popup-make-paid {
    --popup-min-width: 26.25rem;
    --popup-max-width: 26.25rem
}

.popup-make-paid .popup-header {
    margin-bottom: 1rem
}

.popup-make-paid .popup-container {
    max-height: calc(100vh - 5rem)
}

.popup-make-paid .popup-footer {
    padding: .5rem
}

@media only screen and (max-width: 600px) {
    .popup-make-paid .popup-footer {
        padding-inline: 0
    }
}

.popup-make-paid-star {
    position: absolute;
    inset-inline-start: .875rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -1px;
    z-index: 2
}

.popup-make-paid-input {
    --padding-horizontal: 2.625rem
}

.popup-make-paid .btn-primary-transparent {
    margin-top: .5rem !important
}

.accounts-limit-popup .popup-header {
    margin-bottom: 0
}

.accounts-limit-popup .popup-title {
    padding: 0 12px;
    line-height: 40px
}

.accounts-limit-popup .popup-container {
    padding: 12px;
    max-width: 360px;
    border-radius: 16px
}

.accounts-limit-popup .popup-body {
    padding-top: 12px
}

.accounts-limit__pin-container {
    position: relative;
    display: flex;
    margin: 0 auto 8px;
    width: -moz-min-content;
    width: min-content;
    transform-origin: 50% 100%;
    animation: accounts-limit-pin-animation .8s forwards linear
}

.accounts-limit__pin-icon {
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 20px;
    color: #fff
}

.accounts-limit__pin-count {
    position: absolute;
    top: 6px;
    right: 12px;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    font-weight: 500;
    opacity: 0;
    transform: translateY(100%);
    animation: accounts-limit-pin-count-animation .12s forwards .4s
}

.accounts-limit__bar {
    display: flex;
    height: 2rem;
    margin: 0 4px 8px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    --radius: 10px
}

.accounts-limit__bar-left {
    flex: 1;
    padding: 6px 12px;
    background-color: var(--limit-line-empty-background);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius)
}

.accounts-limit__bar-right {
    flex: 1;
    padding: 6px 12px;
    color: #fff;
    background: linear-gradient(84.4deg, #6c93ff -4.85%, #976fff 51.72%, #df69d1 110.7%);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.accounts-limit__description {
    padding: 16px 12px
}

.accounts-limit__description b {
    font-weight: 700
}

.accounts-limit__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 4px 8px
}

.accounts-limit__actions .popup-button {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 0 !important
}

@keyframes accounts-limit-pin-animation {
    0% {
        transform: translate(-160px) rotate(-16deg);
        opacity: .5
    }
    30% {
        transform: translate(0) rotate(-16deg);
        opacity: 1
    }
    50% {
        transform: translate(0) rotate(12deg)
    }
    75% {
        transform: rotate(-2deg)
    }
    to {
        transform: rotate(0)
    }
}

@keyframes accounts-limit-pin-count-animation {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.popup-star-gift-info .popup-container {
    width: 26.25rem;
    border-radius: 14px
}

.popup-star-gift-info .popup-header {
    margin: 0
}

.popup-star-gift-info .popup-body {
    overflow: visible
}

.popup-star-gift-info .popup-footer {
    padding: 0;
    margin-top: 2rem
}

.popup-star-gift-info .currency-star-icon {
    width: 1rem;
    height: 1rem
}

.popup-star-gift-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: -1rem
}

.popup-star-gift-info-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-inline: 1rem;
    width: 100%
}

.is-collectible .popup-star-gift-info-header {
    padding-bottom: 1rem
}

.popup-star-gift-info-backdrop {
    position: absolute;
    inset: 0
}

.popup-star-gift-info-close {
    position: absolute;
    top: .5rem;
    left: .5rem;
    color: #fff
}

.popup-star-gift-info-sticker {
    width: 120px;
    height: 120px;
    position: relative;
    margin-top: 1.625rem
}

.popup-star-gift-info-title {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.75rem;
    text-align: center;
    font-weight: 600
}

.is-collectible .popup-star-gift-info-title {
    z-index: 1;
    color: #fff
}

.popup-star-gift-info-price {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: .375rem;
    gap: .125rem;
    color: var(--green-color);
    font-weight: 500
}

.popup-star-gift-info-subtitle {
    margin-top: 1rem;
    margin-bottom: .375rem;
    text-align: center;
    font-size: var(--font-size-16);
    line-height: 1.375rem;
    text-wrap: balance
}

.is-collectible .popup-star-gift-info-subtitle {
    color: #fffc;
    z-index: 1;
    margin: 0
}

.popup-star-gift-info-subtitle-unavailable {
    margin-top: .875rem;
    text-align: center;
    font-size: var(--font-size-16);
    line-height: 1.375rem;
    color: var(--danger-color)
}

.popup-star-gift-info-actions {
    margin-top: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: .625rem;
    width: 100%
}

.popup-star-gift-info-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    color: #fff;
    background-color: #ffffff1a;
    padding: .375rem .375rem .5rem;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1
}

.popup-star-gift-info-action .tgico {
    font-size: 1.5rem;
    padding: .25rem
}

.popup-star-gift-info-action:hover {
    background-color: #ffffff26
}

.popup-star-gift-info-table {
    margin-top: 1rem;
    padding-inline: 1rem;
    width: 100%
}

.popup-star-gift-info-table-cell {
    padding: .5625rem .6875rem !important
}

.popup-star-gift-info-hint {
    margin-block: 1.375rem .375rem;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    color: var(--secondary-text-color)
}

.popup-star-gift-info-menu-toggle {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: #fff;
    z-index: 1
}

.popup-star-gift-info-tooltip {
    white-space: nowrap;
    max-width: 100% !important
}

.popup-star-gift-info-footer-unique {
    text-align: center;
    background-color: var(--background-color);
    padding: .625rem .75rem
}

.popup-star-gift-info-footer-unique .peer-title {
    color: var(--primary-color);
    cursor: pointer
}

.popup-star-gift-upgrade .popup-container {
    width: 26.25rem;
    padding: 0;
    border-radius: 16px;
    background: none
}

.popup-star-gift-upgrade .popup-body {
    overflow: visible
}

.popup-star-gift-upgrade .popup-footer {
    background: var(--surface-color);
    padding: .625rem 1rem 1rem
}

.popup-star-gift-upgrade .currency-star-icon {
    width: 1rem;
    height: 1rem
}

.popup-star-gift-upgrade-container {
    display: flex;
    flex-direction: column;
    align-items: center
}

.popup-star-gift-upgrade-header {
    background: #5983c0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    padding-inline: 1rem;
    position: relative;
    width: 100%
}

.popup-star-gift-upgrade-close {
    position: absolute;
    top: .25rem;
    left: .25rem;
    z-index: 1;
    color: #fff
}

.popup-star-gift-upgrade-backdrop {
    position: absolute;
    inset: 0;
    display: block
}

.popup-star-gift-upgrade-sticker {
    width: 7.5rem;
    height: 7.5rem;
    position: relative;
    margin-top: 1.625rem;
    z-index: 1
}

.popup-star-gift-upgrade-title {
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    margin-top: 1rem;
    z-index: 1
}

.popup-star-gift-upgrade-subtitle {
    font-size: 16px;
    line-height: 22px;
    margin-top: .75rem;
    margin-bottom: 1.375rem;
    text-wrap: balance;
    color: #fff9;
    z-index: 1
}

.popup-star-gift-upgrade-body {
    padding: 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--surface-color)
}

.popup-star-gift-upgrade-feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .625rem
}

.popup-star-gift-upgrade-feature-icon {
    font-size: 1.875rem;
    margin-top: .3125rem;
    flex-shrink: 0;
    color: var(--primary-color)
}

.popup-star-gift-upgrade-feature-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .125rem
}

.popup-star-gift-upgrade-feature-title {
    font-size: var(--font-size-15);
    line-height: var(--line-height-15);
    font-weight: var(--font-weight-bold)
}

.popup-star-gift-upgrade-feature-text {
    color: var(--secondary-text-color);
    font-size: var(--font-size-15);
    line-height: 22px
}

.popup-star-gift-upgrade-footer {
    background: var(--surface-color);
    display: flex;
    width: 100%;
    justify-content: center
}

.popup-star-gift-upgrade-footer .row {
    padding-inline-start: 3.5rem
}

.popup-send-gift {
    overflow: visible
}

.popup-send-gift .popup-container {
    width: 26.25rem;
    background: var(--light-filled-secondary-text-color);
    margin-top: 3.625rem;
    height: calc(100vh - 6.5rem);
    transition: var(--transition-standard-out);
    transition-property: height, margin-top, max-height;
    padding: 0;
    overflow: visible;
    border-radius: 14px;
    max-height: 100%
}

.popup-send-gift .popup-container.is-chosen-gift {
    margin-top: 0rem;
    height: calc(100vh - 2.875rem);
    max-height: 800px
}

.popup-send-gift .tabs-container, .popup-send-gift .tabs-tab {
    height: 100%;
    overflow: hidden;
    border-radius: 14px
}

@media only screen and (max-width: 600px) {
    .popup-send-gift {
        padding: 0;
        --popup-min-width: 100%;
        --popup-max-width: 100%
    }

    .popup-send-gift .popup-container {
        margin-bottom: 0;
        margin-top: auto !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .popup-send-gift .popup-send-gift-premium-options, .popup-send-gift .star-gifts-grid {
        padding-inline: .5rem
    }
}

.popup-send-gift-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in);
    border-radius: 14px
}

.has-chosen .popup-send-gift-main {
    opacity: 0;
    transform: translate(-32px)
}

.popup-send-gift-main-header {
    position: sticky;
    top: 0;
    width: 100%;
    padding: .5rem;
    z-index: 2;
    transition: background var(--transition-standard-in), border-color var(--transition-standard-in);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px
}

.popup-send-gift-main-header .popup-title {
    margin-left: 1.5rem;
    opacity: 0;
    transform: translate(1rem);
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in)
}

.is-scrolled .popup-send-gift-main-header {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color)
}

.is-scrolled .popup-send-gift-main-header .popup-title {
    opacity: 1;
    transform: translate(0)
}

.popup-send-gift-avatar {
    margin-top: -1.5625rem;
    position: relative
}

.popup-send-gift-avatar .avatar {
    z-index: 1;
    position: relative
}

.popup-send-gift-image {
    position: absolute;
    height: 6.75rem;
    top: -.25rem;
    transform: translate(-3rem)
}

.popup-send-gift-title {
    margin-top: .75rem;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center
}

.popup-send-gift-subtitle {
    margin-top: .375rem;
    margin-bottom: .625rem;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    text-wrap: balance
}

.popup-send-gift-premium-options {
    margin-block: .375rem;
    gap: .625rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-inline: 1rem
}

.popup-send-gift-premium-option {
    width: 100%;
    padding: .25rem .625rem .625rem;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: .625rem;
    cursor: pointer;
    background-color: var(--surface-color)
}

.popup-send-gift-premium-option-sticker {
    width: 84px;
    height: 84px;
    position: relative
}

.popup-send-gift-premium-option-title {
    margin-top: .375rem;
    font-size: var(--font-size-15);
    line-height: 1.25;
    font-weight: 600;
    z-index: 1
}

.popup-send-gift-premium-option-subtitle {
    font-size: var(--font-size-13);
    line-height: 11px;
    font-weight: 400;
    z-index: 1
}

.popup-send-gift-premium-option-price {
    margin-top: .8125rem;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), .1);
    border-radius: 9999px;
    padding: .625rem .75rem;
    font-size: 11px;
    line-height: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1
}

.popup-send-gift-premium-option-price-stars {
    margin-top: .625rem;
    font-size: 11px;
    line-height: 13px;
    color: #d3720a;
    display: flex;
    align-items: center;
    flex-direction: row;
    z-index: 1
}

.popup-send-gift-premium-option-price-stars .currency-star-icon {
    width: .625rem;
    height: .625rem
}

.popup-send-gift-premium-option-price-stars-inner {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-left: .25rem;
    font-weight: 600;
    gap: .125rem
}

.popup-send-gift-premium-option .popup-send-gift-premium-option-badge {
    background: linear-gradient(343.43deg, #5981fe -16.38%, #f863d2 112.93%)
}

.popup-send-gift-premium-option .popup-send-gift-premium-option-badge-text {
    font-size: 11px;
    font-weight: 600
}

.popup-send-gift-categories {
    position: sticky;
    top: 3.5rem;
    width: 100%;
    transition: background-color var(--transition-standard-in), border-bottom-color var(--transition-standard-in);
    border-bottom-color: transparent;
    z-index: 2;
    flex-shrink: 0;
    height: 2.5rem
}

.popup-send-gift-categories.is-pinned {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color)
}

.popup-send-gift-categories .scrollable {
    display: flex;
    flex-direction: row;
    gap: .1875rem;
    padding: .375rem 1rem
}

.popup-send-gift-category {
    padding: .28125rem .75rem;
    font-size: 14px;
    line-height: 19px;
    color: var(--secondary-text-color);
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .25rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color var(--transition-standard-in)
}

.popup-send-gift-category .currency-star-icon {
    width: 1rem;
    height: 1rem
}

.popup-send-gift-category.active {
    background: var(--surface-color)
}

.is-pinned .popup-send-gift-category.active {
    background: var(--light-filled-secondary-text-color)
}

.popup-send-gift-gifts {
    width: 100%;
    min-height: calc(var(--height) - 5.75rem);
    margin-top: -.25rem
}

.popup-send-gift-form {
    background: var(--light-filled-secondary-text-color);
    z-index: 2;
    transition: opacity var(--transition-standard-in), transform var(--transition-standard-in);
    display: flex;
    flex-direction: column;
    height: 100%
}

.popup-send-gift-form-body {
    height: 100%;
    position: relative
}

.popup-send-gift-form-body .scrollable {
    display: flex;
    flex-direction: column
}

.popup-send-gift-form-header {
    display: flex;
    flex-direction: row;
    padding: .5rem .75rem .5rem .5rem;
    align-items: center;
    gap: 1.5rem;
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    background: var(--surface-color)
}

.popup-send-gift-bubbles {
    height: 22.5rem;
    overflow: hidden;
    flex-shrink: 0
}

.popup-send-gift-form-sheet {
    padding: .5rem;
    background-color: var(--surface-color)
}

.popup-send-gift-form-sheet .i18n {
    display: flex;
    align-items: center;
    white-space: pre-wrap
}

.popup-send-gift-form-sheet .i18n .currency-star-icon {
    width: 1rem;
    height: 1rem
}

.popup-send-gift-limited-progress-wrap {
    padding: .75rem .5rem
}

.popup-send-gift-limited-progress-bar {
    border-radius: .625rem;
    height: 1.875rem;
    background-color: var(--limit-line-empty-background);
    position: relative;
    overflow: hidden
}

.popup-send-gift-limited-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--primary-color);
    color: #fff;
    border-top-right-radius: .3125rem;
    border-bottom-right-radius: .3125rem;
    padding: .375rem .75rem
}

.popup-send-gift-limited-progress-text {
    padding: .375rem .75rem;
    font-size: var(--font-size-15);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    position: absolute;
    inset: 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.popup-send-gift-form-input {
    margin: .5rem;
    --padding: .75rem;
    --height: 48px
}

.popup-send-gift-form-hint {
    box-shadow: inset 0 1px 4px #0000000d;
    padding: .5rem 1.5rem;
    font-size: var(--font-size-14);
    line-height: var(--line-height-15);
    color: var(--secondary-text-color)
}

.popup-send-gift-form-send {
    margin: 1rem;
    width: auto;
    height: 3rem;
    flex-shrink: 0;
    text-transform: uppercase
}

.popup-send-gift-form-send .i18n, .popup-send-gift-form-send .xtr {
    white-space: pre-wrap;
    display: inline-flex;
    align-items: center
}

.popup-send-gift-balance {
    background: var(--surface-color);
    border-radius: 9999px;
    position: absolute;
    padding: .65625rem 1.25rem .59375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 50%;
    top: -1rem;
    transform: translate(-50%, -100%);
    transition: opacity var(--transition-standard-in);
    font-size: var(--font-size-14);
    line-height: 1;
    opacity: 1;
    z-index: -1
}

.popup-send-gift-balance .i18n {
    display: flex;
    align-items: center;
    gap: .25rem
}

.popup-send-gift-balance .currency-star-icon {
    width: 1rem;
    height: 1rem
}

.is-chosen-gift .popup-send-gift-balance {
    opacity: 0
}

.popup-send-gift-balance-get-more {
    margin-top: .25rem;
    font-weight: 500;
    cursor: pointer
}

.popup-send-gift-balance-get-more:hover {
    text-decoration: underline
}

#auth-pages {
    max-width: 100%;
    overflow: hidden;
    background: var(--surface-color)
}

#auth-pages .btn-primary {
    text-transform: uppercase
}

@media only screen and (max-width: 600px) {
    #auth-pages .btn-primary {
        height: 50px
    }
}

#auth-pages .subtitle {
    margin: 0
}

@media only screen and (max-width: 600px) {
    #auth-pages .subtitle {
        font-size: 14px
    }
}

#auth-pages .input-wrapper {
    margin-top: 49px
}

@media only screen and (max-width: 600px) {
    #auth-pages .input-wrapper {
        margin-top: 41px;
        width: 100%;
        padding: 0 16px
    }
}

#auth-pages .auth-image, #auth-pages .subtitle, #auth-pages .input-wrapper {
    flex: 0 0 auto
}

#auth-pages > .scrollable {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 720px;
    margin: 0 auto
}

#auth-pages > .scrollable .auth-placeholder {
    flex: 1;
    min-height: 3rem;
    width: 100%
}

@media screen and (max-height: 810px) {
    #auth-pages > .scrollable .auth-placeholder:last-child {
        display: none
    }
}

#auth-pages .tabs-container {
    max-width: 720px;
    min-width: auto;
    margin: 0 auto;
    position: relative
}

@media only screen and (min-width: 721px) {
    #auth-pages .tabs-container:before, #auth-pages .tabs-container:after {
        content: " ";
        position: absolute;
        width: 100%;
        inset: 0 0 0 -100%;
        background: var(--surface-color);
        z-index: 1
    }

    #auth-pages .tabs-container:after {
        left: 100%
    }
}

#auth-pages .tabs-container .tabs-tab {
    background-color: var(--surface-color)
}

#auth-pages .tabs-container .tabs-tab .container {
    height: 810px;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%
}

@media screen and (max-height: 810px) {
    #auth-pages .tabs-container .tabs-tab .container {
        height: 760px
    }
}

@media only screen and (max-width: 600px) {
    #auth-pages .page-password .input-wrapper {
        margin-top: 31px
    }
}

#auth-pages .page-password .input-wrapper .btn-primary {
    margin-top: -.5rem
}

.page-sign .checkbox-field {
    margin-top: -1rem;
    margin-bottom: -1rem
}

.page-sign .auth-image, .page-signUp .auth-image {
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1.5rem
}

@media only screen and (min-width: 601px) {
    .page-sign .auth-image, .page-signUp .auth-image {
        width: 10rem;
        height: 10rem;
        margin-bottom: 1.5rem
    }
}

.page-authCode .phone-wrapper {
    flex: 0 0 auto
}

.sign-logo {
    max-width: 100%;
    max-height: 100%;
    fill: var(--primary-color)
}

.page-sign .btn-secondary, .page-signQR .btn-secondary {
    font-weight: 400
}

.page-sign .qr, .page-signQR .qr {
    margin-top: 1.5rem
}

.page-signQR {
    overflow: unset !important
}

.page-signQR .auth-image {
    width: 240px !important;
    height: 240px !important;
    display: flex;
    justify-content: center;
    align-items: center
}

.page-signQR .auth-image .preloader {
    transform: none;
    left: unset;
    top: unset
}

.page-signQR .auth-image .qr-canvas {
    width: 100%;
    height: 100%
}

.page-signQR .auth-image .qr-canvas + .qr-canvas {
    display: none
}

.page-signQR .input-wrapper {
    margin-top: 1rem !important
}

.page-signQR h4 {
    flex: 0 0 auto
}

.page-signQR .qr-description {
    max-width: 480px;
    margin: 1rem auto;
    line-height: var(--line-height);
    text-align: start
}

.page-signQR .qr-description li {
    margin-top: .5rem
}

.page-signUp .auth-image {
    margin-top: 10px;
    margin-bottom: 14px
}

@media only screen and (max-width: 600px) {
    .page-signUp .auth-image {
        margin-bottom: 24px
    }
}

.page-signUp .fullName {
    flex: 0 0 auto
}

@media only screen and (max-width: 600px) {
    .page-signUp #signUp {
        margin-top: 100px
    }
}

.page-signUp .input-field {
    text-align: initial
}

.page-sign .btn-secondary {
    margin-top: -1rem !important
}

#auth-pages > .scrollable, #main-columns {
    opacity: 1;
    transition: opacity var(--transition-standard-in)
}

#auth-pages-close {
    position: fixed;
    display: flex;
    left: 24px;
    top: 24px;
    z-index: 100
}

.main-screen-enter {
    transition: .2s;
    transform: scale(1.75);
    opacity: 0
}

.main-screen-entering {
    transform: scale(1);
    opacity: 1
}

.main-screen-exit {
    transition: .2s, transform .2s ease-in;
    transform: scale(1);
    opacity: 1
}

.main-screen-exiting {
    transform: scale(1.75);
    opacity: 0
}

.chatlist-exit {
    transition: .2s;
    transform: translateY(0) scale(1);
    opacity: 1
}

.chatlist-exiting {
    opacity: 0;
    transform: translateY(18px) scale(1.01)
}

.auth-pages-enter {
    transition: .4s;
    opacity: 0;
    transform: translate(100px)
}

.auth-pages-entering {
    transform: translate(0);
    opacity: 1
}

.auth-pages-exit {
    transition: .2s;
    transform: scale(1);
    opacity: 1
}

.auth-pages-exiting {
    transform: scale(1.025);
    opacity: 0
}

.page-authCode .auth-image {
    transform: translateY(12px)
}

.page-authCode .phone-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.375rem 0 .875rem
}

.page-authCode .phone-wrapper h4[contenteditable] {
    border: none;
    outline: none;
    padding: 0 1rem;
    border-bottom: 2px solid var(--primary-color)
}

.page-authCode .phone-wrapper .phone.error {
    border-color: var(--danger-color) !important
}

.page-authCode .phone-wrapper .phone {
    margin: 0
}

.page-authCode .subtitle {
    max-width: 300px;
    margin: 0 auto !important
}

.page-chats {
    display: flex;
    max-width: 1680px !important;
    position: relative
}

.page-chats #main-columns {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
    min-height: 100%;
    max-height: 100%
}

@media only screen and (max-width: 600px) {
    .page-chats .main-column {
        width: 100%;
        display: flex !important;
        z-index: 1
    }
}

@media only screen and (min-width: 601px) {
    .page-chats #column-center {
        display: flex !important;
        width: 100%
    }

    .page-chats #column-right {
        display: flex !important
    }

    .page-chats .main-column {
        height: 100%;
        position: relative;
        min-height: 100%;
        max-height: 100%
    }

    .page-chats #main-columns {
        display: flex
    }
}

.page-chats #search-container, .page-chats .sidebar-search {
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3
}

@media only screen and (min-width: 1681px) {
    .page-chats:before, .page-chats:after {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--border-color);
        pointer-events: none
    }

    .page-chats:before {
        left: -1px
    }

    .page-chats:after {
        right: -1px
    }
}

.page-chats .avatar-edit {
    width: 120px;
    height: 120px;
    margin: 1rem auto 2rem;
    flex: 0 0 auto
}

body.animation-level-2 .page-chats .main-column {
    transition: transform var(--tabs-transition), filter var(--tabs-transition)
}

.passcode-lock-screen {
    position: fixed;
    inset: 0;
    background-color: var(--surface-color);
    z-index: var(--passcode-lock-screen-z-index, 100000);
    transition: opacity .4s;
    opacity: 1
}

.passcode-lock-screen--hidden {
    opacity: 0
}

.passcode-lock-screen__animated-lock-icon {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 1.5rem;
    height: 1.5rem;
    color: var(--secondary-text-color);
    z-index: 10;
    --transition-time-move: .3s;
    --transition-time: .4s;
    transition: transform var(--transition-time), left var(--transition-time-move) ease-out, top var(--transition-time-move) ease-out, opacity var(--transition-time);
    --actual-scale: var(--scale, 1);
    transform: translate(-50%, -50%) scale(var(--actual-scale, 1))
}

.passcode-lock-screen__animated-lock-icon svg {
    position: absolute;
    top: 0;
    left: 0
}

.night .passcode-lock-screen__animated-lock-icon--shift-body {
    color: var(--primary-text-color)
}

.passcode-lock-screen__animated-lock-icon--shift-body svg {
    left: 3px
}

.passcode-lock-screen__animated-lock-icon--shift-body .lock-icon-shackle {
    transform-origin: 56.5% center;
    transform: rotateY(180deg) translateY(1px)
}

.passcode-lock-screen__animated-lock-icon--disappear {
    opacity: 0;
    --actual-scale: calc(var(--scale, 1) * 1.075)
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden
}

@media only screen and (max-width: 600px) {
    html, body {
        height: calc(var(--vh, 1vh) * 100)
    }
}

html.is-ios {
    position: fixed;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

html.no-backdrop {
    --menu-background-color: var(--surface-color);
    --menu-backdrop-filter: none
}

@supports (padding: max(0px)) {
    html {
        padding: 0 min(16px, env(safe-area-inset-right)) 0 min(16px, env(safe-area-inset-left))
    }
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
    background-color: var(--body-background-color);
    color: var(--primary-text-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color .2s
}

body.has-auth-pages {
    background-color: var(--surface-color)
}

body.deactivated {
    animation: grayscale-in var(--transition-standard-in) forwards
}

body.deactivated-backwards {
    animation: grayscale-out var(--transition-standard-out) forwards
}

@keyframes grayscale-in {
    0% {
        filter: grayscale(0)
    }
    to {
        filter: grayscale(1)
    }
}

@keyframes grayscale-out {
    0% {
        filter: grayscale(1)
    }
    to {
        filter: grayscale(0)
    }
}

a {
    color: var(--link-color)
}

button, input, optgroup, select, textarea, html {
    font-family: var(--font-regular)
}

input, textarea, button, select, a, div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

pre, code, kbd, samp {
    font-family: var(--font-monospace)
}

.whole {
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 1680px;
    height: 100%
}

@media only screen and (min-width: 601px) {
    .only-handhelds {
        display: none !important
    }
}

.container {
    margin: 0 auto
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold)
}

h4 {
    font-size: 2rem;
    margin: 22px 0 14px;
    line-height: 110%
}

@media only screen and (max-width: 600px) {
    h4 {
        font-size: 20px;
        margin: 2px 0 8px
    }
}

input, [contenteditable=true] {
    caret-color: var(--primary-color);
    color: var(--primary-text-color);
    background-color: transparent
}

input, textarea {
    -webkit-appearance: none;
    font-size: inherit
}

input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0
}

input:-webkit-autofill:first-line {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, Arial, sans-serif;
    font-size: 16px
}

.secondary {
    color: var(--secondary-text-color)
}

.subtitle {
    color: var(--secondary-text-color);
    line-height: var(--line-height)
}

.danger {
    color: var(--danger-color) !important
}

.danger .c-ripple__circle {
    background-color: var(--light-danger-color)
}

.blue, .primary {
    color: var(--primary-color) !important
}

.blue .c-ripple__circle, .primary .c-ripple__circle {
    background-color: var(--light-primary-color)
}

.primary-text {
    color: var(--primary-text-color) !important
}

.color-premium {
    background: var(--premium-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.blue .button-icon, .blue .btn-menu-item-icon, .primary .button-icon, .primary .btn-menu-item-icon, .danger .button-icon, .danger .btn-menu-item-icon {
    color: inherit !important
}

.green {
    color: var(--green-color) !important
}

.bg-warning {
    background: #fed85a !important
}

.contextmenu {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 4 !important;
    max-width: calc(100vw - 1rem)
}

.preloader {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.preloader .preloader-path {
    stroke: var(--primary-color)
}

.overflow-hidden {
    overflow: hidden
}

@keyframes thumbnail-fade-in-opacity {
    0% {
        opacity: 0
    }
    to {
        opacity: .8
    }
}

@keyframes fade-in-opacity {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade-out-opacity {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fade-in-backwards-opacity {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fade-out-backwards-opacity {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fade-in-opacity-fade-out-opacity {
    0% {
        opacity: 0
    }
    10% {
        opacity: 1
    }
    50% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.toasts-container {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.toast {
    padding: .5rem 1rem;
    background-color: #000000a8;
    color: #fff;
    font-size: 1rem;
    border-radius: 10px;
    max-width: min(30rem, calc(100vw - 2rem));
    opacity: 0;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    pointer-events: all;
    word-break: break-word
}

.toast.is-visible {
    opacity: 1
}

body.animation-level-2 .toast {
    transition: opacity var(--transition-standard-in)
}

.toast b {
    color: inherit
}

.toast a {
    color: #60a5e9 !important;
    cursor: pointer
}

hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
    padding-bottom: .5rem
}

b {
    font-weight: var(--font-weight-bold)
}

.avatar-edit {
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden
}

.avatar-edit.is-forum {
    border-radius: var(--avatar-border-radius-forum)
}

.avatar-edit-canvas {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--avatar-color-top), var(--avatar-color-bottom))
}

html.no-touch body.animation-level-2 .avatar-edit .avatar-edit-icon {
    transform: translateY(-50%) translate(-50%) scale(1);
    transition: transform .2s ease-in-out
}

html.no-touch body.animation-level-2 .avatar-edit:hover .avatar-edit-icon {
    transform: translateY(-50%) translate(-50%) scale(1.2)
}

.avatar-edit-icon {
    position: absolute;
    font-size: 3rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translate(-50%);
    z-index: 2;
    color: #fff
}

.avatar-edit .avatar-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: brightness(.7)
}

.missing-icon {
    width: 1.5rem;
    height: 1.5rem
}

.missing-icon-path {
    fill: currentColor
}

.select-wrapper {
    max-height: 23.5rem;
    position: absolute;
    width: 100%;
    top: calc(100% + .5rem);
    left: 0;
    overflow: hidden;
    background-color: var(--surface-color);
    z-index: 3;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    transition: opacity .2s ease-out, transform .2s ease-out;
    transform: scale(.95);
    transform-origin: top center;
    opacity: 0
}

.select-wrapper.active {
    transform: scale(1);
    opacity: 1
}

.select-wrapper ul {
    margin: .5rem 0
}

.select-wrapper li {
    align-items: center;
    padding: 0 1rem;
    justify-content: space-between;
    height: 3.5rem;
    cursor: pointer;
    text-align: start;
    display: grid;
    grid-template-columns:calc(26px + 2rem) 1fr 80px
}

html.no-touch .select-wrapper li:hover, html.no-touch .select-wrapper li:active {
    background-color: var(--light-secondary-text-color)
}

.select-wrapper .emoji {
    height: 26px;
    width: 26px;
    font-size: 26px;
    line-height: 1
}

.select-wrapper .scrollable {
    position: relative
}

.phone-code {
    color: #9e9e9e;
    text-align: end
}

.auth-image {
    width: 166px;
    height: 166px;
    margin: 0 auto 18px;
    position: relative
}

@media only screen and (max-width: 600px) {
    .auth-image {
        width: 120px;
        height: 120px
    }
}

.phone-edit {
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: .4rem;
    opacity: .5;
    transition: .2s opacity;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1
}

html.no-touch .phone-edit:hover, html.no-touch .phone-edit:active {
    opacity: 1
}

.emoji-native {
    display: inline !important;
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
    vertical-align: unset !important;
    line-height: 1 !important
}

@media not screen and (-webkit-min-device-pixel-ratio: 2), not screen and (min-device-pixel-ratio: 2), not screen and (min-resolution: 192dpi), not screen and (min-resolution: 2dppx) {
    html:not(.is-safari) .emoji-native {
        margin-inline-end: 5px !important
    }

    html:not(.is-safari) avatar-element .emoji-native {
        margin-inline-end: 0 !important
    }
}

.emoji-image {
    width: 18px;
    height: 18px;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle
}

[contenteditable=true] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    outline: none;
    cursor: text;
    white-space: pre-wrap
}

[contenteditable=true] .custom-emoji {
    display: inline-block;
    margin-bottom: -2px
}

[contenteditable=true] .custom-emoji:before {
    content: none
}

.sticky_sentinel {
    position: absolute;
    left: 0;
    right: 0;
    visibility: hidden;
    pointer-events: none
}

.super-stickers {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(auto-fill, var(--esg-sticker-size));
    justify-content: space-between
}

html.no-touch .super-sticker:hover, html.no-touch .super-sticker:active {
    background-color: var(--light-secondary-text-color);
    border-radius: 10px
}

.fade-in-transition {
    opacity: 1
}

body.animation-level-2 .fade-in-transition {
    transition: opacity .2s ease-in-out
}

.content-empty {
    color: var(--secondary-text-color)
}

.selection:after {
    content: " ";
    position: absolute;
    inset: 0
}

.input-something {
    display: inline-block
}

.input-selectable {
    position: relative
}

@keyframes grow-icon {
    0% {
        transform: scale(.5);
        opacity: .8
    }
    50% {
        transform: scale(1.1);
        opacity: 1
    }
    to {
        transform: scale(1)
    }
}

@keyframes hide-icon {
    0% {
        transform: scale(1);
        opacity: .4
    }
    to {
        transform: scale(.5);
        opacity: 0
    }
}

.popup-disable-password .popup-description, .popup-skip-email .popup-description {
    max-width: 284px
}

.grid {
    width: 100%;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: .25rem
}

.grid-item {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.grid-item-media {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.grid-item-pin {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 1.75rem;
    text-shadow: 0px 0 3px rgba(0, 0, 0, .45)
}

middle-ellipsis-element {
    width: 100%;
    overflow: hidden;
    display: block
}

.album-item-media {
    width: 100%;
    height: 100%
}

html.no-touch .hover-effect:hover, html.no-touch .hover-effect:active {
    background-color: var(--light-secondary-text-color)
}

html.no-touch .hover-primary-effect:hover, html.no-touch .hover-primary-effect:active {
    background-color: var(--light-primary-color)
}

html.no-touch .hover-danger-effect:hover, html.no-touch .hover-danger-effect:active {
    background-color: var(--light-danger-color)
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.progress-ring__circle {
    transition: stroke-dashoffset;
    stroke-linecap: round
}

.rlottie, .rlottie-vector {
    inset: 0;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%
}

.rlottie-icon {
    position: relative;
    pointer-events: none
}

.rlottie-vector {
    fill: var(--rlottie-vector-fill)
}

body.animation-level-2 .rlottie.fade-in {
    animation: fade-in-opacity .2s ease-in-out forwards
}

.canvas-thumbnail {
    position: absolute;
    width: 100%;
    height: 100%
}

.media-container-contain {
    position: relative
}

.media-container-contain .media-photo {
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%
}

.media-container-cover {
    position: relative
}

.media-container-cover .media-photo {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

body.animation-level-2 .fade-in {
    animation: fade-in-opacity .2s ease-in-out forwards
}

body.animation-level-2 .fade-out {
    animation: fade-out-opacity .2s ease-in-out forwards
}

.media-photo, .media-video, .media-sticker, .media-round, .media-poster {
    position: absolute;
    inset: 0
}

.media-video {
    z-index: 1
}

.media-sticker {
    margin: auto;
    -o-object-fit: contain !important;
    object-fit: contain !important;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%
}

.premium-sticker-lock {
    position: absolute;
    bottom: .125rem;
    left: 50%;
    transform: translate(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background: #0003;
    border-radius: 50%;
    color: #fff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: var(--lock-url);
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 1rem
}

body.is-premium .premium-sticker-lock {
    display: none
}

.media-round {
    max-width: var(--round-video-size);
    max-height: var(--round-video-size);
    z-index: 1
}

.media-round .video-round-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative
}

.media-round .video-time {
    padding: 0 .375rem;
    background-color: var(--message-highlighting-color) !important
}

.media-round .video-time:before {
    margin-inline-start: .25rem
}

.media-round .video-time-icon {
    font-size: 1.125rem
}

.media-round.is-unread .video-time:before {
    order: 1;
    width: .5rem;
    height: .5rem;
    background-color: #fff;
    border-radius: 50%;
    content: " "
}

.gradient-delimiter {
    width: 100%;
    height: .75rem;
    background-color: var(--background-color-true);
    position: relative
}

.gradient-delimiter:before {
    content: " ";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #0000000f, #0000 20% 94%, #0000000f)
}

.sidebar-left-section {
    background-color: var(--surface-color);
    padding: .5rem 0 !important;
    margin-bottom: .75rem;
    box-shadow: 0 1px 3px 0 var(--section-box-shadow-color)
}

.sidebar-left-section.no-shadow {
    box-shadow: none !important
}

.sidebar-left-section-name {
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-between
}

.sidebar-left-section-name-right {
    font-weight: var(--font-weight-normal)
}

.sidebar-left-section-caption {
    margin: -.1875rem 0 1rem;
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
    padding: 0 1.5rem
}

.sidebar-left-section-caption:first-child {
    margin-top: .8125rem;
    margin-bottom: .8125rem
}

@media only screen and (max-width: 600px) {
    .sidebar-left-section-caption {
        padding: 0 1rem
    }
}

.sidebar-left-section-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.sidebar-left-section-container a {
    cursor: pointer
}

hr {
    display: none !important
}

.stealthy {
    left: 0;
    margin: 0;
    max-height: 1px;
    max-width: 1px;
    opacity: 0;
    outline: none;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1
}

.navigable-list .active {
    background-color: var(--light-secondary-text-color);
    border-radius: inherit
}

.super-emojis {
    --esg-emoji-size: 2.125rem;
    --esg-emoji-total-size: calc(var(--esg-emoji-size) + .5rem);
    --custom-emoji-size: 2.25rem;
    display: grid;
    grid-template-columns:repeat(auto-fill, var(--esg-emoji-total-size));
    justify-content: space-between;
    position: relative;
    font-size: var(--esg-emoji-size);
    line-height: var(--esg-emoji-size);
    -moz-column-gap: .25rem;
    column-gap: .25rem
}

.super-emojis .custom-emoji {
    display: block
}

.super-emojis .custom-emoji-renderer {
    z-index: 1
}

.super-emojis .custom-emoji:before {
    content: none
}

.super-emoji {
    display: inline-block;
    padding: .25rem;
    line-height: inherit;
    border-radius: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    width: var(--esg-emoji-total-size);
    height: var(--esg-emoji-total-size);
    position: relative
}

.super-emoji .emoji-placeholder {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--light-secondary-text-color);
    pointer-events: none
}

body.animation-level-2 .super-emoji .emoji-placeholder {
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.super-emoji .emoji {
    width: 100%;
    height: 100%;
    vertical-align: unset;
    margin: 0
}

body.animation-level-2 .super-emoji .emoji {
    opacity: 1;
    transition: opacity .2s ease-in-out
}

.super-emoji .premium-sticker-lock {
    left: auto;
    inset-inline-end: 0;
    transform: scale(.75)
}

.super-emoji.active {
    background-color: var(--light-secondary-text-color)
}

.super-emoji-custom {
    padding: .1875rem
}

.super-emoji-regular {
    overflow: hidden
}

html.native-emoji .super-emoji-regular {
    padding-top: .3125rem;
    padding-bottom: .3125rem
}

html.no-touch .super-emoji:hover, html.no-touch .super-emoji:active {
    background-color: var(--light-secondary-text-color)
}

.sending-status-icon {
    position: absolute;
    line-height: 1 !important
}

.sending-status-icon-sendingerror {
    color: var(--danger-color)
}

.quick-reaction-title {
    display: flex;
    align-items: center
}

.quick-reaction-sticker {
    width: 32px !important;
    height: 32px !important;
    position: relative !important;
    margin: 0 .5rem 0 0 !important
}

.verified-icon-svg {
    width: 1rem;
    height: 1rem
}

.verified-icon-check {
    fill: #fff
}

.verified-icon-background {
    fill: var(--primary-color)
}

.verified-icon, .premium-icon, .emoji-status {
    flex: 0 0 auto;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: .125rem;
    width: 1.25rem;
    height: 1.25rem
}

.emoji-status {
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: .25rem
}

.emoji-status .sparkles-container {
    color: var(--sparkles-color, var(--primary-text-color));
    font-size: .375rem;
    position: absolute;
    inset: 0
}

.premium-icon {
    color: var(--primary-color);
    margin-top: -.0625rem
}

.badge-fake {
    flex: 0 0 auto;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    padding: .125rem .25rem;
    border-radius: .185rem;
    font-size: .625rem;
    font-weight: var(--font-weight-bold);
    line-height: 1 !important;
    margin-inline: .25rem .25rem
}

.peer-title.with-icons {
    display: flex;
    align-items: center;
    min-width: 0
}

.peer-title.with-icons .sparkles-container {
    transform: translateY(-.5rem)
}

.peer-title-inner {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.chatlist-chat.row-with-padding {
    padding-inline-start: 4.5rem !important
}

.chatlist-chat .row-title {
    font-size: var(--font-size-16) !important;
    line-height: 1.375rem
}

.chatlist-chat .row-title-right-secondary {
    display: flex;
    align-items: center;
    height: 1.25rem;
    margin-top: -.4375rem;
    font-size: var(--font-size-12) !important;
    line-height: var(--line-height-12) !important
}

.chatlist-chat .row-row {
    height: 1.375rem
}

.chatlist-chat.chatlist-chat-abitbigger .row-subtitle {
    margin-top: 0
}

.chatlist-chat.chatlist-chat-bigger .row-subtitle {
    margin-top: 0;
    font-size: var(--font-size-16) !important;
    line-height: 1.375rem
}

.chatlist-chat.chatlist-chat-bigger .row-subtitle-row {
    margin-top: .125rem
}

.chatlist-chat.chatlist-chat-bigger .row-title .peer-title {
    font-weight: var(--font-weight-bold)
}

.username-purchase-help b {
    font-weight: var(--font-weight-normal) !important;
    color: var(--danger-color) !important
}

.media-spoiler-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit
}

.media-spoiler-container.is-revealing {
    opacity: 1
}

.media-spoiler-container.is-revealing:not(.backwards) {
    opacity: 0
}

.media-spoiler-container.is-revealing.animating {
    transition: opacity var(--transition-standard-out)
}

.media-spoiler-thumbnail, .media-spoiler .canvas-thumbnail {
    position: absolute;
    -o-object-fit: unset !important;
    object-fit: unset !important;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.accordion {
    overflow: hidden;
    height: 0
}

.accordion.is-expanded {
    height: var(--max-height)
}

body.animation-level-2 .accordion {
    transition: height var(--transition-standard-in)
}

.accordion-icon {
    --translateY: 4px;
    transform: rotate(0) translateY(var(--translateY));
    color: var(--secondary-text-color);
    font-size: 1.25rem;
    display: inline-block;
    line-height: 0
}

body.animation-level-2 .accordion-icon {
    transition: transform var(--transition-standard-in)
}

.accordion-right-button {
    min-width: 3.875rem;
    height: 3rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: var(--primary-text-color);
    cursor: pointer;
    position: relative
}

html.no-touch .accordion-right-button:hover, html.no-touch .accordion-right-button:active {
    background-color: var(--light-secondary-text-color)
}

.accordion-right-button .accordion-icon {
    --translateY: 0px;
    color: currentColor;
    display: block;
    font-size: 1rem;
    margin-inline: .125rem -.25rem
}

.accordion-right-button .accordion-counter {
    font-size: var(--font-size-13);
    margin-inline-start: .0625rem
}

.accordion-toggler-expanded .accordion-icon {
    transform: translateY(var(--translateY)) rotate(180deg)
}

.accordion-toggler-round {
    padding-inline-end: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.cant-select .checkbox-box-border {
    border-style: dotted
}

.inner-shadow {
    --inner-shadow-degree: 90deg;
    --inner-shadow-size: 1rem;
    position: absolute;
    inset: 0;
    content: " ";
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(var(--inner-shadow-degree), var(--surface-color) 0%, rgba(var(--surface-color-rgb), 0) var(--inner-shadow-size), rgba(var(--surface-color-rgb), 0) calc(100% - var(--inner-shadow-size)), var(--surface-color) 100%)
}

.inner-shadow-inset {
    background: linear-gradient(var(--inner-shadow-degree), var(--surface-color) 0%, var(--surface-color) calc(var(--inner-shadow-size) / 2), transparent var(--inner-shadow-size), transparent calc(100% - var(--inner-shadow-size)), var(--surface-color) calc(100% - var(--inner-shadow-size) / 2), var(--surface-color) 100%)
}

.range-steps-selector {
    padding-top: 2.375rem
}

.expired-story-icon {
    display: inline-block;
    font-size: 1.2857142857em;
    margin-top: -6px;
    vertical-align: middle;
    margin-left: -4px
}

.privacy-bg {
    background: linear-gradient(180deg, var(--gradient-colors))
}

.privacy-bg-public {
    --gradient-colors: #50ABFF, #007AFF
}

.privacy-bg-close {
    --gradient-colors: #88D93A, #30B73B
}

.privacy-bg-selected {
    --gradient-colors: #FFB743, #F69A36
}

.privacy-bg-contacts {
    --gradient-colors: #C36EFF, #8B60FA
}

.reacted-list-reaction-icon {
    --size: 1.5rem;
    --custom-emoji-size: var(--size);
    display: flex;
    width: var(--size);
    height: var(--size);
    position: absolute;
    top: 50%;
    inset-inline-end: 1rem;
    transform: translateY(-50%)
}

.reacted-list-checks {
    margin-inline-end: .25rem;
    font-size: 1.125rem
}

.force-reconnect {
    pointer-events: all;
    color: currentColor;
    text-decoration: underline;
    cursor: pointer
}

.tgico {
    pointer-events: none
}

.no-view-transition::view-transition-old(root) {
    animation: none
}

.no-view-transition::view-transition-new(root) {
    animation: none
}

.reverse::view-transition-old(root) {
    background: none;
    z-index: 2
}

.inline-icon {
    vertical-align: bottom;
    line-height: inherit
}

.icon-reflect {
    display: inline-block;
    transform: scaleX(-1)
}

.code {
    --font-size: var(--messages-secondary-text-size);
    display: block;
    margin: .25rem 0;
    font-size: var(--font-size)
}

.code-header {
    background-color: rgba(var(--primary-color-rgb), .2);
    color: var(--primary-color);
    font-family: var(--font-regular);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    padding-inline-end: .0625rem !important;
    cursor: pointer;
    line-height: 1;
    padding: .0625rem .625rem
}

.code-header-name {
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.code-header-button {
    font-size: calc(var(--font-size) + 4px);
    pointer-events: all;
    border-radius: 50%;
    padding: .25rem
}

html.no-touch .code-header-button:hover, html.no-touch .code-header-button:active {
    background-color: rgba(var(--primary-color-rgb), .16)
}

.code-header-toggle-wrap {
    margin-inline-start: .875rem
}

.code-content {
    line-height: calc(var(--font-size) + 5px)
}

.code-code {
    display: block;
    padding: .25rem .625rem
}

.code.is-scrollable .code-code {
    overflow: auto;
    white-space: pre
}

.night .code {
    background-color: #000c
}

.tchart--wrapper {
    --tchart-letter-spacing-small: auto !important;
    --tchart-letter-spacing-large: auto !important;
    margin-top: -12px;
    z-index: 0
}

.tchart--zoom {
    inset: -8px 1rem auto auto !important
}

.privacy-premium-icon {
    vertical-align: text-top;
    color: var(--primary-color);
    font-size: 1.125rem;
    margin-inline-start: .25rem
}

.show-when {
    background: #00000014;
    border-radius: 12px;
    padding: 0 6px;
    display: inline-block
}

.delimiter-with-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: .4;
    gap: .5rem;
    flex: 0 0 auto;
    padding: 0 .25rem
}

.delimiter-with-text-stripe {
    display: block;
    height: .0625rem;
    background-color: currentColor;
    flex: 1 1 auto;
    border-radius: 1px;
    opacity: .5
}

.business-hours {
    font-size: var(--font-size-14);
    position: absolute;
    top: 3.25rem;
    width: calc(100% - 5.5rem);
    pointer-events: none;
    opacity: 0
}

@media only screen and (max-width: 600px) {
    .business-hours {
        width: calc(100% - 5rem)
    }
}

body.animation-level-2 .business-hours {
    transition: opacity var(--transition-standard-in)
}

body.animation-level-2 .business-hours-container {
    transition: padding-bottom var(--transition-standard-in)
}

.business-hours-container .row-icon {
    top: .75rem;
    transform: none;
    font-size: 2rem;
    margin-inline-start: -.3125rem
}

.business-hours-container.is-expanded .business-hours {
    opacity: 1
}

.business-hours-row {
    display: flex;
    justify-content: space-between;
    line-height: 27px
}

.business-hours-row-time {
    color: var(--secondary-text-color)
}

.business-hours-switch-time {
    background-color: var(--light-primary-color);
    border-radius: 1.5rem;
    padding: .125rem .375rem;
    color: var(--primary-color);
    font-size: var(--font-size-14);
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 1
}

.business-location {
    padding-inline-end: 4rem
}

.business-location .row-media {
    inset-inline: auto .5rem !important;
    border-radius: 10px
}

.business-location .media-photo {
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.personal-channel-name {
    display: flex;
    align-items: center
}

.personal-channel-counter {
    border-radius: 5px;
    padding: 1px 6px;
    background-color: rgba(var(--primary-color-rgb), .2);
    font-size: var(--font-size-12);
    margin-inline-start: .5rem
}

.personal-channel .skeleton {
    background-color: var(--light-filled-secondary-text-color);
    position: absolute;
    width: 75%;
    top: 0;
    z-index: 1;
    border-radius: 8px
}

.personal-channel .skeleton-container {
    height: 1.25rem
}

.personal-channel .dialog-title-details {
    min-width: 2.5rem
}

.personal-channel .dialog-title-details .skeleton {
    inset-inline-end: 0;
    width: 100%
}

.personal-channel .dialog-title-details .skeleton-child {
    display: inline
}

.text-loading {
    --background-gradient-size: 20rem;
    background-image: linear-gradient(to right, transparent 10%, var(--skeleton-color) 50%, transparent 90%);
    background-size: var(--background-gradient-size);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: .25rem;
    animation: text-loading 1.5s linear infinite
}

@keyframes text-loading {
    0% {
        background-position-x: 0;
        opacity: 1
    }
    50% {
        opacity: .8
    }
    to {
        background-position-x: var(--background-gradient-size);
        opacity: 1
    }
}

.playback-rate-menu {
    width: 5.625rem;
    min-width: auto
}

.animated-item {
    position: absolute
}

.stars-balance {
    text-align: end
}

.stars-balance-title {
    font-size: var(--font-size-14);
    line-height: 14px
}

.stars-balance-subtitle {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .125rem
}

.stars-balance .currency-star-icon {
    width: 20px;
    height: 20px;
    margin-top: -1px
}

.stars-stacked {
    --size: 26px;
    --background-offset: calc(var(--size) - 10px);
    width: var(--size);
    height: var(--size);
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    --star-background-color: var(--background-color)
}

.stars-stacked .stars-star-icon {
    width: var(--size);
    height: var(--size);
    flex: 0 0 auto;
    margin-top: -2px
}

.stars-stacked .stars-star-icon-stroke {
    background: linear-gradient(90deg, var(--star-background-color) var(--background-offset), transparent var(--background-offset))
}

.currency-star-icon-stroke {
    stroke-width: 5px;
    stroke: var(--surface-color)
}

.xtr-icon {
    vertical-align: bottom;
    line-height: inherit
}

.clearfix {
    clear: both;
    display: table
}

.extended-media-buy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 2.5rem;
    padding: 0 1rem;
    background-color: #0000004d;
    -webkit-backdrop-filter: var(--menu-backdrop-filter);
    backdrop-filter: var(--menu-backdrop-filter);
    font-weight: var(--font-weight-bold);
    color: #fff;
    z-index: 2;
    font-size: var(--font-size-14);
    border-radius: 2rem;
    white-space: pre;
    display: flex;
    align-items: center
}

.extended-media-buy-icon {
    margin-right: .25rem;
    font-size: 1.125rem
}

.appear-zoom {
    transform: scale(0)
}

body.animation-level-2 .appear-zoom {
    transition: transform .1s
}

.appear-zoom--active {
    transform: scale(1)
}
